# 内存泄漏
不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)
来看下前端容易出现的内存泄漏
意外的全局变量
javascript 对未声明变量会在全局最高对象上创建它的引用,(是以属性存在的,而不是变量),如果在浏览器上就是 window
对象,如果在 node 环境下就是global
; 如果未声明的变量缓存大量的数据,它可能只有在页面被刷新或者被关闭的时候才会释放内存,这样就造成了内存意外泄漏
console.log
作为前端平时使用 console.log
在控制台打出相对应的信息可以说是非常常见。但如果没有去掉 console.log
可能会存在内存泄漏。因为在代码运行之后需要在开发工具能查看对象信息,所以传递给 console.log
的对象是不能被垃圾回收。
闭包
首先闭包是一个函数A返回一个内联的函数B,即使A函数执行完,函数B也可以访问函数A里面的变量,这就是一个简单的闭包。本质上闭包是将函数内部和外部连接起来的一座桥梁
DOM泄漏
为了减少DOM的操作,我们一般将常用的DOM采用变量引用的方式会将其缓存在当前环境。如果在进行一些删除、更新操作之后,可能会忘记释放已经缓存的DOM,导到内存泄漏
被遗忘的定时器
常用的定时器 setInterval()
、setTimeout()
,他们都是规定延迟一定的时间执行某个代码,而其中 setInterval()
和链式 setTimeout()
在使用完之后如果没有手动关闭,会一直存在执行占用内存,所以在不用的时候我们可以通过 clearInterval()
、clearTimeout()
来关闭其对应的定时器,释放内存
# 内存泄漏的识别方法
使用快捷键 F12 或者 Ctrl+Shift+J 打开 Chrome 浏览器的「开发者工具」
选择 Performance(老版为Timeline) 选项卡,在 Capture 选项中,只勾选 Memory。
设置完成后,点击最左边的 Record 按钮,然后就可以访问网页了。
在页面上进行各种操作,模拟用户的使用情况
一段时间后,点击对话框的 stop 按钮,面板上就会显示这段时间的内存占用情况