内存泄漏
1. 概念
内存泄漏(Memory Leak)是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。
2. 产生情况
1. 闭包
原因:不是说所有的闭包都会产生内存泄漏,只是不恰当的闭包会。闭包可以维持函数内局部变量,使其得不到释放。这种未得到释放的局部变量就会导致内存泄漏。
解决:将事件处理函数定义在外部,解除闭包,或者在定义事件处理函数的外部函数中,删除引用。
2. 全局变量
原因:在我们开发时,会存在定义过多的全局变量,这些全局变量,使用过多,且使用完后,未被释放掉,会导致内存泄漏。
解决:在 JavaScript 文件头部加上 'use strict',可以避免此类错误发生。启用严格模式解析 JavaScript ,避免意外的全局变量。
- 计时器
原因:在使用定时器setInterval、setTimeout后,未对其进行清除
解决:clearInterval, clearTimeout
- 回调函数
原因:在vue开发中,我们常见的是在created或mounted时进行事件的监听,就没了后续,这样也容易产生
解决:在destoryed时需要将该事件注销掉。
- dom元素
原因:在开发,会定义变量来声明dom元素,这种是对象的引用,页面存在dom元素的移除,但是改引用还是存在内存中。
解决:清除相应的引用,复制为null
3. 排查工具
chrome的 performance
- 打开开发者工具 Performance
- 勾选 Screenshots 和 memory
- 左上角小圆点开始录制(record)
- 停止录制
如果面板中的HEAP栏在一直往上增长,那么存在内存泄漏,在快照中我们可以采用相同的操作执行几次快照,然后进行快照的比对,从中可以看出一些不同的变化,如果变化过大,则可以根据相应的不同排查问题,例如某个array在变大。或者从GC root 根节点出发,可达的对象里,哪些对象占用大量内存,这些就是可排查的对象。
4. 建议
- 在开发中对于一些变量的使用,特别是引用类的,我们如果使用完后,确保可以不用了,我们可以手动的将它复制为null,让他可以被回收掉。
- 还有就是上面所说的那几种情况,以及相应的解决方式。