前端会造成内存泄漏的操作有哪些?页面卡住的原因

如果你发现前端页面卡住了,打开开发者工具也很卡,刷新页面也无效、或者关闭 tab页也很费劲,多半是有内存泄漏。

内存泄漏其实就是浏览器的内存被占用很多,导致页面奔溃。

以下是一些常见的引起内存泄漏的操作:

  1. 未正确解绑事件处理程序:

    • 如果在DOM元素上添加了事件监听器,但是在元素被移除之前没有被正确移除,就可能导致内存泄漏。确保使用 removeEventListener 来移除事件监听器。
  2. 定时器未清理:

    • 使用 setIntervalsetTimeout 创建定时器时,如果没有使用 clearIntervalclearTimeout 取消定时器,可能会导致内存泄漏。
  3. 闭包:

    • 在 JavaScript 中,闭包可能导致内存泄漏。当函数内部引用了外部函数的变量,并且该函数在外部函数执行后仍然存在,就会导致引用的变量无法被垃圾回收。
  4. 未释放资源:

    • 例如,使用 XMLHttpRequest 发送请求时,如果没有正确处理和释放资源,可能会导致内存泄漏。确保在请求完成后正确关闭或释放资源。
  5. DOM 元素引用:

    • 在 JavaScript 中引用了 DOM 元素,但在页面生命周期结束前没有释放这些引用。在单页应用(SPA)中,注意在组件销毁时释放对 DOM 元素的引用。
  6. 循环引用:

    • 如果两个或多个对象相互引用,而且没有被垃圾回收机制检测到,就可能导致内存泄漏。这是一种常见的情况,尤其是在使用缓存或数据结构时。
  7. 大量数据未清理:

    • 在处理大量数据时,确保及时清理不再需要的数据,以防止长时间占用内存。
  8. 使用缓存不当:

    • 如果不适当地使用缓存,可能导致缓存的数据一直存在于内存中,即使不再需要。需要定期清理缓存或使用一些策略来确保合理使用缓存。
  9. do / while 死循环

相关推荐
jojo是只猫21 分钟前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜0510 小时前
React - createPortal
前端·vue.js·react.js
晓131310 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78912 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼12 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原12 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序