# 内存泄漏

不再用到的内存,没有及时释放,就叫做内存泄漏(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() 来关闭其对应的定时器,释放内存

# 内存泄漏的识别方法

  1. 使用快捷键 F12 或者 Ctrl+Shift+J 打开 Chrome 浏览器的「开发者工具」

  2. 选择 Performance(老版为Timeline) 选项卡,在 Capture 选项中,只勾选 Memory。

  3. 设置完成后,点击最左边的 Record 按钮,然后就可以访问网页了。

  4. 在页面上进行各种操作,模拟用户的使用情况

  5. 一段时间后,点击对话框的 stop 按钮,面板上就会显示这段时间的内存占用情况

JS内存泄漏排查方法 (opens new window)