为什么要使用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里面标签的使用,缓存处理等建议,可以根据这些来对网站进行优化。