使用 Performance 看看浏览器在做什么

前言

Chrome 浏览器的 Performance 面板为我们提供了检测页面性能的能力，但其提供的远不止一些性能数据。本文将从工作原理的视角，结合实际工程的录制结果，探一探性能面板向我们透露的其他信息。

性能面板

关于面板的功能与使用方法，可以参考这篇 文章。本节主要介绍浏览器架构与性能面板的关系。

因为尚未决出最终的标准架构，各大浏览器的实现细节各有不同。这里我们以 Chrome 的架构为例，对照其架构与性能面板的关系。

Network

Network 代表浏览器进程中的网络线程，我们可以看到时间轴上包含了所有的网络请求和文件下载的调用信息，并以不同颜色标识不同类型的资源。

Main

Main 代表渲染进程中的主线程，渲染相关的事情基本都是它来做，脚本执行、样式计算、布局计算、绘制等等。

Compositor & Raster

Compositor 代表渲染进程中的合成线程，Raster 代表渲染进程中的栅格线程。如今浏览器绘制一个页面，可以分为以下几步：

• 主线程将页面分成若干图层（后文中会提及 Update Layer Tree）
• 栅格线程分别对每一个层进行栅格化处理
• 合成线程将栅格化的图块合并成一个页面

GPU

显然，这部分就是 GPU Process 中的 GPU 线程。

浏览器的工作报告

接下来我们将大致从时间维度，看看浏览器录制下来的「工作报告」。

文档的下载解析

我们旅途的起点将从点击 Chrome Performance Panel 的 Reload 按钮（形如刷新）开始。当前页面首先进行卸载，伴随着几个日志上报，浏览器开始了 index.html 的下载工作。

不同资源的处理

以下处理策略都可以在主线程中看到，但是不同资源的处理条长短差距较大，截图困难，这里不做呈现。

那么浏览器对不同资源的处理策略是怎样的呢？

• 浏览器下载 HTML 并解析，如果遇到外部 CSS 等资源，就会由 Browser 进程中的 network 线程下载
• 当 CSS 下载时，HTML 的解析过程可以继续
• 当解析遇到了外部 Script 标签（不包含 async、defer 属性）时，解析停止，直到脚本下载并执行完成

总的来说，浏览器对 HTML 的解析过程不会被 CSS、IMG 等资源的下载阻塞，但脚本的加载和执行会终止 HTML 的解析。这主要是因为 JS 可能会改变 DOM 的结构，或者是 JS 动态加载其他 JS 再改变 DOM 等潜在问题。

显然，尽管浏览器可以并发几个 network 线程下载资源，但如果仅像上述策略这样处理，当解析到