从 B 站出发，用 Chrome devTools performance 分析页面如何渲染

页面是如何渲染的？通常会得到“解析 HTML、css 合成 Render Tree，就可以渲染了”的回答。但是具体都做了些什么，却很少有人细说，我们今天就从 Chrome 的性能工具开始，具体看看一个页面是如何进行渲染的，以及进行页面优化时需要关注哪些指标。

以“老二次元”网站 bilibili 为例，我们将通过分析 performance 面板，串联起 Chrome 页面渲染流程，以及页面的部分量化指标的含义，来看页面具体是如何渲染的。

获取performance数据

首先，打开Chrome devTools， 选择 performace面板，点击录制按钮开始录制。

之后为了防止我们分析页面时出现无关的干扰，我们通过以下步骤降低干扰项：

1、打开 Chrome 无痕模式。

2、关闭所有在 Chrome 无痕模式下启用的拓展（如果有的话）。

3、在地址栏输入 www.bilibili.com 前，先打开 devTools，选择 performance 面板，点击录制按钮。

4、在已经录制的情况下，地址栏回车，请求 B 站，大概 10s 后，停止录制。

我们从上到下，将图分成以下几块，如下图所示：

1、控制面板

2、概览面板

3、网络面板

4、Web Vitals

5、线程面板

6、内存面板

7、聚合面板

控制面板

控制面板有 4 部分内容，分别为：

• disable javascript samples：启用后会隐藏一些 JS 调用栈的展示。在一些性能较弱的设备例如移动端上，可以开启这项功能。

• Network：可以用来模拟各种网络状况。

• enableadvanced paint instrumention (slow)：启用后 paint 面板会显示与绘制相关事件的更详细的信息。
  CPU：可以用来模拟不同的 CPU 性能。

概览面板

概览面板是各项指标的一个概览，包含了 FPS 帧数、CPU 占用、NET 情况、内存使用情况等。

简单举个例子，比如 FPS 帧数可以直观的看出 FPS 的高低，绿色代表低的部分。而 CPU 栏的黄色代表着 js，紫色代表计算样式和布局，绿色代表绘制。

网络面板

网络面板用于展示正在请求中的各部分的组成情况。

Web vitals

Web vitals 是网站的 Web 体验指标，其中包括 LCP（最大内容绘制）、FID（首次输入延迟）、cls (累计布局偏移)等。

线程面板

线程面板用于展示渲染当前页面所使用到的线程，包含有 Main 线程、GPU 线程、Raster 线程、Chrome_ChildIOThread、Compositor 线程等等。其中 Main 线程，就是我们平时说的大部分 js 的运行环境，即主线程。

内存面板

展示 js 内存、GPU 内存、节点数、监听事件数的变化。

聚合面板

当点击主线程中的火焰图时，此面板会显示显示具体包含执行时间、执行组成、调用栈等等的信息集合。

Chrome是如何渲染页面的？

第一个请求

以第一个请求为例，我们来具体看一下 Chrome 是如何进行页面渲染的？依然是以对 https://www.bilibili.com 的请求为例，来看一下 1ms 的 performance 面板，即下图中红线部分、中间 NET 栏蓝色细长条开始的部分和 Network 中水平箱线图开始的部分。

其中两边横线中间深浅色方框的部分是水平箱线图，是用来展示某部分在整体中的比例关系。比如我们看到这个长长的箱型图，通过直观感受，就能知道对前面一部分横线挺长的，蓝色部分里浅色部分很长，深色的短，右边的横线几乎看不到。那这些又分别能展示什么信息？

首先，点开箱型图最下方的聚合面板（Summary），上面赫然写着：此乃页面源。欲求小破站， 终生皆让我……耗时一秒半。

然后在 Network tab 里查看该请求的 timing 部分，可以得到如下图：

这里的各个部分分别代表：

• Queueing（排队）：浏览器会在一些情况下让请求排队等待，比如这个请求的优先级不高，有更高优先级的请求存在；在使用 HTTP/1.0 或者 HTTP/1.1 时，同域请求最大并发数量为 6 个，此时已经达到了最大值；而上图中的请求是属于最高优先级的第一个请求，即浏览器正在