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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
一枚攻城狮14 小时前
前端知识点大汇总
前端
Mike_jia15 小时前
DumbAssets:开源资产管理神器,家庭与企业的高效管家
前端
Southern Wind16 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
HuangYongbiao16 小时前
Rspack 原理:webpack,我为什么不要你
前端
yinuo16 小时前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽16 小时前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户984022766791816 小时前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔16 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
Holin_浩霖16 小时前
JavaScript 语言革命:ES6+ 现代编程范式深度解析与工程实践
前端
前端拿破轮16 小时前
从0到1搭一个monorepo项目(一)
前端·javascript·git