性能优化之调试工具

一、sources打断点调试

dom元素断点调试：

image.png

二、性能监控插件

1. Audits:

2. pagespeed: 分析页面使用了哪些优化

3. Layers: 分析页面图层

4. Performance 录制页面并分析
   蓝色：网络通信和html解析
   黄色：javascript执行
   紫色：样式计算和布局，即重排
   绿色： 重绘

5. Memory -> Profiles 分析页面内存情况

   
   image.png
   

   距离gc跟节点的距离，有值说明在被引用

6. Lighthouse 分析网页整体性能