chrome调试-性能分析performance篇

1、performance页面性能分析

本文将介绍如何使用chrome devTool的performance来对页面进行性能分析

（1）操作过程

1、进入匿名模式保证分析结果少收到其他插件的干扰（windows可使用快捷点 ctrl + shift + N）
2、确保screenshots checkbox是选中的，然后点击controls，开始记录（windows快捷键 shift + E），这时候Devtools就开始录制各种性能指标，你可以点击页面等进行各种操作，所有的操作都会被浏览器录制下来。录制期间， 可以点击stop进行快速操作结束录制，然后等待显示性能报告，stop按钮位置如下图：

（2）分析报告说明

先放上测试例图：

1、首先我们将上面的示例图进行拆分成三部分，1、上面部分是动画记录条，2、统计细节展开区域，3、统计结果汇总区域

2、细节说明
      a、FPS(帧率)在最上方动画记录区域可以看到完整的图。绿色竖线越高，FPS越高，红色的话表示长时间帧，很可能会出现卡顿，所在测试的时候要特别注意红色部分

      b、CPU,在动画记录区域可以看到完整的图。
      c、NET(网络请求)，在动画记录区域可以看到完整的图，每条色彩横线表示一种资源，越长表示检索资源所需的时间越长。每条横线浅色的地方表示等待的时间
      d、统计报表说明：

            蓝色(Loading)：网络通信和HTML解析

            黄色(Scripting)：JavaScript执行

            紫色(Rendering)：样式计算和布局，即重排

            绿色(Painting)：重绘

            灰色(other)：其它事件花费的时间

            白色(Idle)：空闲时间

        e、结合Main中的详细事件统计，如果有出现红色三角区域，说明这个事件存在问题，需要特别注意。可以通过统计报表中的Call tree找到对于的文件链接，点进去排查代码。

（3）移动设备方面的拓展

如果想分析移动设备 的页面性能，可用CPU控制器来模拟移动端CPU。

1、点击performance

2、点击最右侧设置按钮（⚙），工具栏会展开更多模式，如下图选中CPU 4* slowdown，就能模拟4倍低速CPU

3、其他分析操作同上（1）操作过程