一直在window上面挂东西是否有什么风险

合集 - 前端小知识点(36)

1.使用同一个链接，如何实现PC打开是web 应用、手机打开是一个H5应用01-01 2.如何保证用户的使用体验01-01 3.如何解决页面请求接口大规模并发问题01-01 4.设计一套全站请求耗时统计工具01-01 5.大文件上传01-01 6.h5如何解决移动端适配问题01-01 7.实现站点一键换肤功能实现方式有哪些01-01 8.如何实现网页加载进度条01-01 9.常见图片懒加载方式有哪些01-01 10.cookie构成部分有哪些01-01 11.DNS协议了解多少01-01 12.函数式编程了解多少01-01

13.一直在window上面挂东西是否有什么风险01-01

14.小程序为什么会有两个线程01-01 15.如何通过设置失效时间清除本地存储的数据?01-01 16.如果不使用脚手架，如果用webpack构建一个自己的react应用01-01 17.用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数01-01 18.package.json 里面 sideEffects 属性的作用01-01 19.script 标签上有那些属性01-01 20.SPA 中使用 hash 路由时作用和意义01-01 21.用户访问页面白屏了，原因是啥如何排查?01-01 22.[代码实现]S 中如何实现大对象深度对比01-01 23.JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法01-01 24.<script> 标签放在 HTML 文档的 <body> 内底部01-01 25.虚拟滚动加加载的原理和实现思路01-01 26.ts二刷01-11 27.promise面试题01-11 28.命令行创建 uni-app 项目01-12 29.uniapp+v3的小知识点01-26 30.ts文件忽略校验01-27 31.['',''].join(" ").trim()01-28 32.自定义导航栏交互(导航栏左上角按钮+滚动动画效果)01-28 33.可视化点击x轴标签实现标签文字切换02-09 34.运行vue -V的时候vue : 无法加载文件 C:\Users\jiaho\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本02-12 35.uniapp+vue2实现下载相关02-26 36.深度响应式劫持vue303-07

内存泄漏风险
- 原理：如果在window对象上不断添加属性或方法，而没有及时清理，当这些属性或方法引用了大量的数据（如大型数组、复杂对象等），并且这些数据在后续的操作中不再需要时，就可能会导致内存泄漏。例如，在一个单页应用（SPA）中，每次页面状态变化都在window上挂载一个新的包含大量状态信息的对象，并且没有在适当的时候删除这些对象，随着时间的推移，浏览器占用的内存会越来越大。
- 示例：
  - 假设在一个JavaScript应用中，有一个函数会在window上创建一个大型数组，并且没有释放机制。
```
function createLargeArrayOnWindow() {
  window.largeArray = new Array(1000000).fill(0);
}
createLargeArrayOnWindow();
```
  - 当这个函数被多次调用后，就会占用大量的内存空间。如果这是一个长时间运行的应用，如Web应用程序的后台管理界面，可能会导致浏览器变慢甚至崩溃。
命名冲突风险
- 原理：window对象是全局作用域的一部分，在一个网页中，可能会包含多个JavaScript脚本。如果不同的脚本在window上定义了相同名称的属性或方法，就会产生命名冲突。这可能会导致程序的逻辑错误，使得某些功能无法正常运行。例如，一个第三方库和应用自身的代码都在window上定义了名为init的方法，当调用init时，就很难确定到底是哪个方法被执行。
- 示例：
  - 假设有两个脚本文件script1.js和script2.js。
  - 在script1.js中：
```
window.init = function () {
  console.log('This is init from script1');
};
```
  - 在script2.js中：
```
window.init = function () {
  console.log('This is init from script2');
};
```
  - 当在HTML页面中同时引入这两个脚本并调用window.init时，只有script2.js中定义的init函数会被执行，因为它覆盖了script1.js中定义的init函数，这可能会破坏script1.js原本期望的功能。
安全风险
- 原理：从安全角度来看，window对象上挂载的敏感信息可能会被恶意脚本访问。例如，如果在window上存储了用户的登录凭证（如密码、令牌等），并且没有采取适当的安全措施（如加密、权限控制等），恶意脚本就有可能获取这些信息并进行非法操作，如窃取用户账户信息、发起恶意请求等。
- 示例：
  - 假设一个不安全的JavaScript代码在window上存储了用户的登录密码。
```
window.userPassword = '123456';
```
  - 一个恶意脚本通过跨站脚本攻击（XSS）注入到页面中，就可以轻松地访问window.userPassword并获取用户的密码，然后将密码发送给攻击者的服务器，导致用户账户安全受到威胁。
性能风险（在某些情况下）
- 原理：如果在window上挂载过多的属性和方法，尤其是一些复杂的计算函数或者频繁访问的数据，可能会影响浏览器的性能。这是因为浏览器在访问window对象的属性时，需要在全局作用域中进行查找，过多的属性会增加查找的时间和开销。此外，在一些性能敏感的操作（如动画渲染、高频事件处理等）过程中，如果频繁地访问window上挂载的复杂对象，可能会导致性能下降。
- 示例：
  - 假设在window上挂载了一个复杂的计算函数，用于实时计算页面上元素的布局信息。
```
window.calculateLayout = function () {
  // 复杂的布局计算代码，涉及大量的DOM操作和数学计算
};
```
  - 当页面频繁地触发重绘（如在窗口大小不断变化的场景下），并且每次重绘都需要调用window.calculateLayout函数，这会增加页面重绘的时间，导致页面的响应性能变差，用户可能会感觉到明显的卡顿。

posted @ 2025-01-01 18:31 jialiangzai 阅读(116) 评论(0) 编辑收藏举报

JIA

光明神已陨落，现在由光明引领我

一直在window上面挂东西是否有什么风险

公告

最新随笔

我的标签

合集

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

喜欢请打赏