chrome 性能测试

1、打开测试地址
https://googlechrome.github.io/devtools-samples/jank/
2、测试手段：限制 cpu 速度
由于有些用户的设备 cpu 性能很高，无法很好的分析移动端，或者发现低级设备的性能问题，所以我们要降速
找到控制台中的 performance 项，找到 CPU 选项，选择降低 4 倍性能或 6 倍性能

image.png

3、添加运动小块，找到性能瓶颈

image.png

4、先看看优化后的效果会怎样？

image.png

5、了解 performance 各模块
如何分析现象，肯定要依赖数据，这里就要用到 chrome 的 performance 功能了
先将页面切到非优化的状态，点击“录制”按钮

image.png

image.png

image.png

step 1：了解 Fps

fps：是指页面每秒帧数
fps = 60 性能极佳
fps < 24 会让用户感觉到卡顿，因为人眼的识别主要是 24 帧

红色：意味着帧数已经下降到影响用户体验的程度，chrome已经帮你标注了，这块有问题

绿色：其实就是Fps指数，所有绿色柱体高度越高，性能越好

Net 部分可以将屏幕逐帧录制下来，可以帮助观察页面的状态，主要用处，可以帮助分析首屏渲染速度
1，查看特定帧的 fp

image.png

2，悬停其上，可以查看数据

image.png

3，点击 Frames 块，得到更详细的数据

image.png

1，duration 是当前帧从 796.31ms 开始等待，796.31 ms + 127.73 ms 后进行了一次渲染

2，fps 还是老算法，1000 ms/127.73 ms 约 等于 7fps

3，最下面是关键帧的视图画像
三，找到瓶颈
前面已经知道我们的测试页面有性能问题，那么接下来就要想为什么了
step 1：了解 Summary

image.png

对性能进行录制完成的时候，会默认在底部展示一个 Summary 摘要，显示全局的信息

分析报告：
蓝色(Loading)：网络通信和HTML解析时间

黄色(Scripting)：JavaScript执行时间

紫色(Rendering)：渲染时间

绿色(Painting)：重绘

灰色(system)：系统花费的时间

白色(Idle)：空闲时间

总时间-空闲时间，就是此界面显示需要的时间。

上面展示了 0～5.52 s 录制时间的具体耗时：

1，script 执行耗时 1410 ms

2，render 渲染耗时 3952 ms

3，Painting 重绘耗时 291 ms

主要就是这 3 个耗时，知道了这三部分耗时，只是知道了，哪有问题，但具体问题在哪呢？
step 2：了解 Main

image.png

上图中，可以看到 Animation Frame Fired 右上角有个红色三角号，这就是chrome 自动帮助识别出有问题的部分
就像 FPS 中的红条一样，用来识别问题
上图可以看到提示了Warning : 重复处理程序耗时171.34毫秒
step 4：追溯问题，定位代码位置

image.png

如上图，可以看到函数调用在代码中的位置，可以点击进行查看

image.png