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

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

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

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

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

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

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

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

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

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

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

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

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

相关推荐
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.1 小时前
serviceWorker缓存资源
前端
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子4 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码5 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html