1. 使用 performance monitor 实时查看内存变化
查看 JS Heap size 和 DOM Nodes的数量,如果持续升高,则表明内存泄漏
2. 使用 memory 面板分析内存变化
memory有3种方式,可以分析内存:
1. Heap snapshot - 用以打印堆快照,堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配
2. Allocation instrumentation on timeline - 在时间轴上记录内存信息,随着时间变化记录内存信息。
3. Allocation sampling - 内存信息采样,使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销,可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。
方法1:用Heap snapshot快照的方式
记录几次快照,比较前后的内存中,各个对象的数量变化,如果有大量该对象,或比对中,数量差异明显,则可能存在泄漏。
重点分析该对象,可点开对应的代码分析源码。
方法2:用时间线收集
通过时间线快照,面板上面有蓝线,表示内存占用,若持续出现,表示未被释放。可以将范围缩小到给蓝线。查看下面的对象数量,若有对象的个数非常多,则表明该对象可能出现内存泄漏。
展开该对象,查看下面的对象,点击对象,可定位到源码。分析源码,是否有内存泄漏。
3. 产生内存泄漏的几种场景
1. 意外的全局变量 函数中意外的定义了全局变量,每次执行该函数都会生成该变量,且不会随着函数执行结束而释放。
2. 未清除的定时器 定时器没有清除,它内部引用的变量,不会被释放
3. 脱离DOM的元素引用 一个dom容器删除之后,变量未置为null,则其内部的dom元素则不会释放。通过Memory的快照,可以看到detached的dom元素,即为脱离dom的元素引用
4. 闭包引起内存泄漏
5. 持续绑定的事件 函数中addEventListener绑定事件,函数多次执行,绑定便会产生多次,产生内存泄漏。