前端内存泄漏

195 阅读1分钟

前端内存泄漏此文转载乐字节 现象 内存占用率高,导致页面卡死,点击无反应。 系统进程不再用到的内存,没有及时释放,就叫做内存泄漏。

引起内存泄漏的原因 全局变量 浏览器中,全局对象就是window对象,变量在窗口关闭或重新刷新页面之前都不会被释放,如果未声明的变量缓存大量的数据,就会导致内存泄漏。

未声明变量 function fn(){ a = 'global test' } fn() 复制代码 使用this创建的变量(this的指向是window) function fn(){ this.a = 'global test' } fn() 复制代码 解决方法: 1.避免创建全局变量

2.使用严格模式,在js文件头部或者函数的顶部加上use strict

闭包引起的内存泄漏 原因:闭包可以读取函数内部的变量,然后让这些变量始终保存在内存中。如果在使用结束后没有将局部变量清除,就可能导致内存泄漏。

没有清理的DOM元素引用 解决方法: 手动删除

elements.btn = null

乐字节被遗忘的定时器或者回调 解决方法: 手动删除定时器和dom

removeEventlistener移除事件监听

ES6防止内存泄漏 weakmap数据结构,对值的引用都是不计入垃圾回收机制的 const wm = new WeakMap() const ele = document.getElementById('example') wm.set(element,'something') wm.get(element **ps:需要自学视频关注B站BV1Wh411a75X?p=3&spm_id_from=pageDriver