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
