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
网友评论