前端内存泄漏

现象

内存占用率高，导致页面卡死，点击无反应。
系统进程不再用到的内存，没有及时释放，就叫做内存泄漏。

引起内存泄漏的原因

全局变量

浏览器中，全局对象就是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
复制代码