什么是内存泄漏:
内存泄漏(Memory Leak)是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。
前端常见内存泄露
1.意外的全局变量
- 未使用关键字声明的变量
function test () {
value = 'hk'
}
test()
// 加上代码校验解决
- 由 this 创建的全局变量
function test () {
this.value = 'hk'
}
// 调用自身,this指向了全局对象(window)
test()
2.console输出
因为代码运行之后需要在开发工具查看对象,所以传递给console.log的变量不会被回收
3.闭包
下例中:b函数是不会被回收的,因为它被变量test 引用着,处于随时被调用的状态,想要释放的话需要test=null
由于闭包会携带包含它的函数作用域,因此会比其他函数占用更多内存
function a(param) {
function b () {
console.log(param)
}
return b
}
let test = a('test')
test()
// test = null 释放b 内存
没被清理的计时器
setTimeout, setInterval 没有使用 clearTimeout, clearInterval清理掉定时器
dom 泄露
浏览器中的dom和js 使用的是不一样的引擎,dom是渲染引擎,js 是v8 引擎,所以js 操作dom 是比较耗性能的,因为他们需要桥来连接他们。为了减少dom的操作,我们会采用引用的方式将其缓存在当前环境中,在删除或更新dom 之后,我们就可能忘记已经使用引用缓存的dom,这就容易造成dom泄露。
下例子中:test是不能被回收的,因为删除的dom 在js 上仍然被引用着,不会被回收,需要test=null 才能被回收
var test= document.querySelector('#button')
var main = document.querySelector('.main')
main.removeChild(test)