工具
从左到右依次为:
- Record(Ctrl+E) 记录运行时性能
- Start profiling and reload page(Ctrl+Shift+E) 记录负载性能,会重新加载页面
- clear 清空面板
- Load profile… 上传
- Save profile… 下载,会生成个json文件,需要做比对可以再上传
- recordings 生成过的profile列表记录,注意:点clear就全没有了
- Screenshots 屏幕截图,启用会在录制时捕获每一帧的屏幕截图
- Memory 内存 下面也会有重点介绍
- Web Vitals 核心功能,会显示LCP,FCP,LongTasks
- Collect garbage 录制时强制垃圾收集
CPU颜色划分 :Loading
颜色 执行内容
1. 蓝色 ( Loading ) 网络通信和HTML解析
2. 黄色 ( Scripting ) JavaScript执行
3. 紫色( Rendering ) 样式计算和布局(重排)
4. 绿色 ( Painting ) 样式更改(重绘)
5. 灰色 ( Other ) 其他事件
6. 白色 ( Idle ) 空闲时间
7. 红色 ( LongTasks ) 长任务出现
火焰图
- 在概览上可以拖动鼠标进行缩放,可以点击定位,可以鼠标滚轮放大缩小
- 点击火焰图任何区域,可以使用键盘的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链接,即可定位到具体的代码