性能优化之调试工具

一、sources打断点调试

dom元素断点调试:


性能优化之调试工具_第1张图片
image.png

二、性能监控插件

  1. Audits:

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

  3. Layers: 分析页面图层

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

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


    性能优化之调试工具_第2张图片
    image.png

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

  6. Lighthouse 分析网页整体性能

你可能感兴趣的:(性能优化之调试工具)