Performance火焰图

工具

从左到右依次为：

1. Record(Ctrl+E) 记录运行时性能
2. Start profiling and reload page(Ctrl+Shift+E) 记录负载性能，会重新加载页面
3. clear 清空面板
4. Load profile… 上传
5. Save profile… 下载，会生成个json文件，需要做比对可以再上传
6. recordings 生成过的profile列表记录，注意：点clear就全没有了
7. Screenshots 屏幕截图，启用会在录制时捕获每一帧的屏幕截图
8. Memory 内存 下面也会有重点介绍
9. Web Vitals 核心功能，会显示LCP，FCP，LongTasks
10. Collect garbage 录制时强制垃圾收集

CPU颜色划分 ：Loading

颜色	                     				执行内容
1. 蓝色 ( Loading )					网络通信和HTML解析
2. 黄色 ( Scripting )				JavaScript执行
3. 紫色( Rendering )					样式计算和布局(重排)
4. 绿色 ( Painting )					样式更改(重绘)
5. 灰色 ( Other )					其他事件
6. 白色 ( Idle )						空闲时间
7. 红色  ( LongTasks )				长任务出现

火焰图

1. 在概览上可以拖动鼠标进行缩放，可以点击定位，可以鼠标滚轮放大缩小
2. 点击火焰图任何区域，可以使用键盘的WASD进行缩放和左右位移

Frames-帧

白色：没有变化
绿色：按预期及时渲染
黄色：浏览器尽最大努力及时呈现至少一些视觉更新，比如滚动了但主线程没空
红色：掉帧，无法在合理的时间内渲染帧，
	 比如：scroll，resize事件触发过于频繁,
	 浏览器来不及处理导致在下一个事件被触发之前无法完成

分析检测结果

summary总结，概要

首先要读懂报告中的概览信息
在左下角展示出的饼图中，有各个阶段的名称、占用时间、颜色信息。
这里一般来说，需要着重关注的有两个：一是黄色的区域，
代表脚本执行时间，另一个是紫色的渲染时间。

Bottom-Up

，它的里面可以按照排序查看各个阶段占用的时间

这里有两列时间数据，
	一是"Self Time"代表任务自身执行所消耗的时间，
	二是"Total Time"代表此任务及其调用的附属子任务一共消耗的时间。
	这两列数据各有不同的用处，可以按自己的需求决定按哪列数据作为排序字段。

在Activity的右侧，
	部分还带有Source Map链接，点击之后可以定位到相应操作对应的代码。
	使用它可以比较方便地定位到具体的代码。

推荐使用development版本的前端资源，如webpack-dev-server构建出来的版本，
因为一般它的source map更准确一些。使用production模式带source-map的版本也行。

"Call Tree"中的内容，在"Bottom-Up"中也能看到，无明显的区别。

"Event Log"中的内容，
	是按顺序记录的事件日志，数据比较多。
	常见的优化级别中一般用不到它。
	如果是比较大型的应用，打开它可能会直接导致Chrome卡死。

注意上面的截图中，
	各个Activity有标注各自的颜色，它和Summary中的颜色是对应的，
	根据颜色可快速判断出它的类型是脚本、渲染或加载等。

时间条

如果开启了"Screenshots"选项，则鼠标浮动在任意一个点都能看到当时的截图。

同样是根据颜色，我们可以判断出在当前选中范围内，大部分的时间是黄色的脚本执行时间，
还有一部分紫色的是渲染时间。另外还有一些空白的区域，一般是存在异步操作，如网络请求。

在时间条区域中，可以任意选定范围，下面的"Summary"、"Bottom-Up"等信息都会随着范围的变化自动更新。

诊断问题

首先在时间条中选择可疑的范围，针对性地分析问题。

从时间条中可看出，有多处紫色的区域。根据刚刚的介绍，我们知道它是渲染过程。
这些渲染过程明显地比一般的网站要多一些。

先选定一块紫色的区域，然后查看相应的Bottom-Up信息。

找到相应行之后，点击右侧的Source Map链接，即可定位到具体的代码