利用谷歌DevTool解决web网页内存泄漏问题

目录

web网页内存泄漏

主要的内存泄漏来源

利用谷歌DevTool定位内存泄漏问题

性能Performance

主要功能

Performance insights性能数据分析

Memory内存

三种模式

相关概念

解决内存泄漏问题

第一步 ：是否内存泄漏：js堆直增不降；降的不多

第二步：找到导致内存泄漏的函数或者变量，以及出现的时机

第三步：几种常见的内存泄漏。解决：优化代码，手动垃圾回收

总结

---

web网页内存泄漏

        web 网页内存泄漏指网页在运行过程中,占用的内存越来越多,而无法自动释放,从而导致网页性能下降或崩溃。

主要的内存泄漏来源有:

1. 没有及时清除定时器或回调函数
        如果定时器或回调函数中的变量一直被引用,但没有及时清除定时器,这些变量的内存无法释放,导致内存占用越来越高。

2. 没有及时移除不再需要的事件监听器
        如果一直不停地添加事件监听器但没有及时移除,这也会导致占用的内存越来越高。

3. 闭包
        如果一个闭包的变量一直被引用,其占用的内存也无法释放。

4. DOM 节点引用未清除
        如果持续生成 DOM 节点,但没有及时移除不再需要的节点,DOM 节点会越来越多,占用的内存也会上升。

5. 第三方库或插件未正常释放内存
        一些第三方库或插件如果本身存在内存泄漏,也会影响网页的内存占用。

        初次了解到内存泄漏，还是因为在我的实际项目中网页经常卡顿甚至直接崩溃，占用的cpu和js堆极高。那么我是如何定位到是内存泄漏导致的网页卡顿呢，主要是依靠我们常用的谷歌浏览器自带的devtool工具。

利用谷歌DevTool定位内存泄漏问题

性能Performance

测试网址：https://googlechrome.github.io/devtools-samples/jank/

操作：f12打开谷歌控制台，点开性能Performance工具栏。

主要功能：

1. 模拟移动设备，模拟cpu降速，网络降速

2. 可以使用录制⏺来操作自己的页面生成报告，分析报告中的指标

3. 卡顿主要表现指标：FPS 帧率越低，颜色越红，体验越差。 快捷键：Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux)

4. CPU占用 CPU与摘要中的圆形图表对应

 5. 长任务：右上角有红色三角，需要警惕，长任务耗时异常。

点击长任务可定位到具体哪一行代码导致耗时

6. 提供屏幕截图