网页内存泄漏的方案定位分析解决

Posted 2021-09-03 要么努力，要么放

写在前面，通过以下方式提供一个完全纯净可控的分析环境。
1.隐私窗口，禁用所有扩展（避免影响内存分析）
2.关闭开发模式HMR功能，因为 VUE_HOT_RELOAD 也会产生一层引用，我并不能完全信任它
3.使用模拟数据，每次执行操作，都会渲染一样的可被人工计算清楚(知道哪个类会产生多少实例)的数据
4.performance 过程中手动GC

https://juejin.cn/post/684490...

什么情况会引起内存泄漏？

虽然有垃圾回收机制但是我们编写代码操作不当还是会造成内存泄漏。

1.意外的全局变量引起的内存泄漏。

原因：全局变量，不会被回收。

解决：使用严格模式避免。

2.闭包引起的内存泄漏

原因：闭包可以维持函数内局部变量，使其得不到释放。

解决：将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对dom的引用。

3.没有清理的DOM元素引用

原因：虽然别的地方删除了，但是对象中还存在对dom的引用

解决：手动删除。

4.被遗忘的定时器或者回调

原因：定时器中有dom的引用，即使dom删除了，但是定时器还在，所以内存中还是有这个dom。

解决：手动删除定时器和dom。

5.子元素存在引用引起的内存泄漏

原因：div中的ul li 得到这个div，会间接引用某个得到的li，那么此时因为div间接引用li，即使li被清空，也还是在内存中，并且只要li不被删除，他的父元素都不会被删除。

解决：手动删除清空。