浏览器开发者工具之JavaScript内存监控（Performance）

为什么要使用Performance

• GC的目的是为了实现内存空间的良性循环
• 良性循环的基石是合理使用
• 即刻关注才能确定是否合理
• Performance提供多种监控方式

内存问题的表现

网络环境是正常的，且👇

• 页面出现延迟加载或者经常性暂停
• 页面持续性出现糟糕的性能
• 页面的性能随时间延长越来越差

定义内存问题的标准

• 内存泄漏：内存使用持续升高
• 内存膨胀：在多数设备上都存在性能问题
• 频繁垃圾回收：通过内存变化图进行分析

监控内存的几种方式

1. 浏览器任务管理器

快捷键Shift+ESC

第一列是DOM内存；最后一列是堆内存

2. Timeline时序图记录 ⭐

通过Performance时刻监控内存，可定位到出现问题的代码块

1. 点击清空当前内存

2. 勾选内存Memory，点击左上角灰色的点，开始监听

3. 结束监听

4. 在HEAP堆可以清楚的看到该页面的内存情况

3. 堆快照查分离DOM ⭐

什么是分离DOM

• 界面元素存活在DOM树上
• 垃圾对象时的DOM节点
• 分离状态的DOM节点

什么是垃圾对象的DOM

脱离DOM树，且没有任何引入

内存泄漏

脱离DOM但是有引用，在页面中是看不见的，内存里是占据空间的

通过堆快照找到，并手动修改清除释放

找到js堆，对照片留存，可以看到里面的所有信息

4. 判断是否存在频繁的垃圾回收

• GC工作时应用程序是停止的
• 频繁且过长的GC会导致应用假死
• 用户使用中感知应用卡顿

监控方法

• 通过Timeline中频繁的上升下降
• 任务管理器中数据频繁的增加减小

5. Lighthouse ⭐

在这里面你可以看到它给你各个方面的建议，比如图片、css、js这些文件的处理，还有html里面标签的使用，缓存处理等建议，可以根据这些来对网站进行优化。