chrome performance

window.performance

一、缩略图

1、FPS，表示每一秒的帧数，用来衡量页面动画的性能指标。fps图中绿色柱状越高表示体验越好。若出现红色长条则表示在该时间端出现长帧，可能影响用户体验。（目前大多数设备的屏幕刷新率为 60 次/秒）

2、CPU，表示cpu的使用情况，其中颜色含义和底下的Summary模块中相同。从该行中颜色块的跨越时长可以分析哪类事件消耗的时间较长，从而找到性能瓶颈。

3、NET，每一个颜色条表示加载一种文件。蓝色表示html文件、黄色表示js文件、紫色表示样式文件、绿色表示媒体文件、灰色表示其他资源。

4、screenshots，对应每一时刻页面的显示情况。

5、HEAP，表示堆内存使用情况。

二、详细

1、在Frames图表中，把鼠标移动到绿色条状图上，Devtools会展示这个帧的FPS
2、展开Main图表，Devtools展示了主线程运行状况。X轴代表着时间。每个长条代表着一个event。长条越长就代表这个event花费的时间越长。Y轴代表了调用栈（call stack）。在栈里，上面的event调用了下面的event。

3、raster(光栅化）页面元素绘制成位图（ paint ）

4、GPU  绘制位图到屏幕上

三、summary

对应了缩略图中 cpu 使用

参考：

https://juejin.im/post/5a5ec3a8518825545d75ccef

https://www.jishuwen.com/d/20Qe