详解谷歌浏览器 performance 选项卡

本文要点

详细介绍谷歌浏览器 performance 选项卡的各个指标，让你知道如何查看网页性能。

谷歌浏览器版本为：79.0.3945.117（正式版本） （64 位）。

性能分析操作流程

1. 在谷歌浏览器调式模式下，切换到 performance 选项卡。点击刷新图标（或者Ctrl+Shift+E快捷键）。
   
2. 出现如下网页分析进度条。
   
3. 自动停止后，会出现性能分析图。

注意点1：需要勾选屏幕快照选项，才会出现如下屏幕快照截图（一般是默认勾选）。

注意点2：整个分析图出现的时间轴就是前面步骤中分析进度条的时间，而默认出现的区域时间轴是首屏加载时间。

如图所示：
（1）以上红色框出的部分（也是整个时间轴）就是前面分析进度条的分析时间。
（2）以上绿色框出的部分是首屏加载时间。
（3）首屏加载时间刻度与选项卡 Summary 的 Total 总时间一致。
（4）如下图可通过左右边界来调整时间轴区域。时间轴区域 2 是 时间轴区域 1 的放大版，便于查看时间轴区间的各项指标性能情况。

性能分析图详解

如下所示，把整张分析图划分成 3 个区域。

区域1：网页性能总览图
总览图包含 FPS（每秒帧数情况）、CPU（CPU占用情况）、NET（网络资源情况）、HEAP（JS占用情况）一共四项指标。

FPS：全称 Frames Per Second，表示每秒传输帧数，是速度单位，用来分析动画的一个主要性能指标。1fps = 0.304 meter/sec(米/秒)。如下图所示，绿色竖线越高，FPS 越高。 红色表示长时间帧，可能出现卡顿。

如果能够达到 >=60fps(帧)/s 的刷新频率，就可以避免出现卡顿。
尽量保证页面要有高于每秒60fps(帧)的刷新频率，这与大多数显示器的刷新率相吻合(60Hz)。如果网页动画能够做到每秒60帧，就会跟显示器同步刷新，达到最佳的视觉效果。

这意味着，一秒之内进行 60 次重新渲染，每次重新渲染的时间不能超过1/60=0.01666s（秒）；0.01666s*1000=16.66ms（毫秒）。

不同帧的体验：
帧率能够达到 50 ～ 60 FPS 的动画将会相当流畅，让人倍感舒适；
帧率在 30 ～ 50 FPS 之间的动画，因各人敏感程度不同，舒适度因人而异；
帧率在 30 FPS 以下的动画，让人感觉到明显的卡顿和不适感；
帧率波动很大的动画，亦会使人感觉到卡顿。

CPU：CPU 资源。此面积图指示消耗 CPU 资源的事件类型。
下图中颜色分别为（与数据统计中的颜色数据表示一致）：
蓝色(Loading)：表示网络通信和 HTML 解析时间。
黄色(Scripting)：表示 JavaScript 执行时间。
紫色(Rendering)：表示样式计算和布局（重排）时间。
绿色(Painting)：表示重绘时间。
灰色(other)：表示其它事件花费的时间。
白色(Idle)：表示空闲时间。

NET：每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）。

HEAP：JavaScrip 执行的时间分布。

区域2：各项指标的区块图

1. Network：表示每个服务器资源的加载情况。

2. Frames：表示每幅帧的运行情况。

3. Timings：上图中有 4 条虚线，分别表示如下。
   （1）DCL（DOMContentLoaded）表示 HTML 文档加载完成事件。当初始 HTML 文档完全加载并解析之后触发，无需等待样式、图片、子 frame 结束。作为明显的对比，load 事件是当个页面完全被加载时才触发。
   （2）FP（First Paint）首屏绘制，页面刚开始渲染的时间。
   （3）FCP（First Contentful Paint）首屏内容绘制，首次绘制任何文本，图像，非空白canvas 或 SVG 的时间点。
   （4）FMP（First Meaningful Paint）首屏有意义的内容绘制，这个“有意义”没有权威的规定，本质上是通过一种算法来猜测某个时间点可能是 FMP。有的理解为是最大元素绘制的时间，即同LCP（Largest Contentful Paint ）。
   其中 FP、FCP、FMP 是同一条虚线，三者时间不一致。比如首次渲染过后，有可能出现 JS 阻塞，这种情况下 FCP 就会大于 FP。
   （5）L（Onload）页面所有资源加载完成事件。
   （6）LCP（Largest Contentful Paint ）最大内容绘制，页面上尺寸最大的元素绘制时间。

4. Main：表示主线程。
   合成线程主要负责：
   Javascript 的计算与执行；
   CSS 样式计算；
   Layout 布局计算；
   将页面元素绘制成位图（paint），也就是光栅化（Raster）；
   将位图给合成线程。

5. Raster：光栅化（处理光栅图，即位图）。

6. GPU：表示 GPU 占用情况。

7. Chrome_childIOThread：子线程。

8. Compositor：合成线程。
   合成线程主要负责：
   将位图（GraphicsLayer 层）以纹理（texture）的形式上传给 GPU；
   计算页面的可见部分和即将可见部分（滚动）；
   CSS 动画处理；
   通知 GPU 绘制位图到屏幕上。

JS Heap：表示 JS 占用的内存大小。
Documents：表示文档数。
Nodes：表示 Node 节点数。
Listeners：表示监听数。
GPU Memory：表示 GPU 占用数。
下面的 4 条折线图是以上 4 个指标（没有 GPU 消耗）对应的时间消耗的内存大小与节点数量。若将某项指标前面的勾选去掉则不会出现对应的折线。
注意这个折线图只有在点击 Main 主线程的时候才会有，选择其他的指标时折线图区域时空白。

区域3：数据统计与汇总

Summary：表示各指标时间占用统计报表；
Bottom-Up：表示事件时长排序列表（倒序）；
Call tree：表示事件调用顺序列表；
Event Log：表示事件发生的顺序列表；

Loading 事件：

内容	说明
Parse HTML	浏览器解析 HTML
Finish Loading	网络请求完成
Receive Data	请求的响应数据到达事件，如果响应数据很大（拆包），可能会多次触发该事件
Receive Response	响应头报文到达时触发
Send Request	发送网络请求时触发

Scripting 事件：

内容	说明
Animation Frame Fired	一个定义好的动画帧发生并开始回调处理时触发
Cancel Animation Frame	取消一个动画帧时触发
GC Event	垃圾回收时触发
DOMContentLoaded	当页面中的DOM内容加载并解析完毕时触发
Evaluate Script	A script was evaluated.
Event	JS 事件
Function Call	浏览器进入 JS 引擎时触发
Install Timer	创建计时器（调用setTimeout()和setInterval()）时触发
Request Animation Frame	A requestAnimationFrame() call scheduled a new frame
Remove Timer	清除计时器触发
Time	调用 console.time() 触发
Time End	调用 console.timeEnd() 触发
Timer Fired	定时器激活回调后触发
XHR Ready State Change	当一个异步请求为就绪状态后触发
XHR Load	当一个异步请求完成加载后触发

Rendering 事件：

内容	说明
Invalidate layout	当 DOM 更改导致页面布局失效时触发
Layout	页面布局计算执行时触发
Recalculate style	Chrome 重新计算元素样式时触发
Scroll	内嵌的视窗滚动时触发

Painting事件：

内容	说明
Composite Layers	Chrome 的渲染引擎完成图片层合并时触发
Image Decode	一个图片资源完成解码后触发
Image Resize	一个图片被修改尺寸后触发
Paint	合并后的层被绘制到对应显示区域后触发

后记

在我的博文 详解网页性能参数 performance API 中介绍了 performance API 的各项参数。本文介绍谷歌浏览器 performance 选项卡的使用。可能会有读者疑惑，两者有何区别？

详解网页性能参数 performance API 一文主要介绍网页性能 API。你可以在你的 js 脚本中获取到这些参数，来做性能监控，参数判断等。
比如你可以在谷歌浏览器中打开任意网页，进入调式模式，在 Console 选项卡中输入 performance，得到如下参数。
而本文主要介绍如何使用谷歌浏览器性能查看工具 performance 选项卡。读者可两篇文章一起看，加深对网页性能参数的了解。