共计 1062 个字符，预计需要花费 3 分钟才能阅读完成。
一、前言
以当初 Chrome 应用的渲染器 Blink 为例, 它也是 Webkit 下的一个分支。先贴出官网文档
How Blink works
首先阐明，我不会 C ++，所以并不能以本人构建过浏览器并钻研外面的每一部分这种实际的形式来解释浏览器中的线程工作原理，我只能通过我曾经理解过的，比拟权威的文档来通知大家。我贴出的所有文档都出自于 Chromium 官网文档中的链接。
二、Blink 的线程机制
接下来咱们以官网视角用比拟权威的路径来解读：
首先明确 Blink 实现一个网页渲染须要做的事件：
- 实现 Web 规范，也就是 W3C 和一些规范组织的标准。包含 HTML、DOM、CSS 等。
- 嵌入 V8 引擎，执行 JS
- 申请网络资源
- 构建 DOM 树
- 计算款式和布局
- 嵌入合成器，绘制图形
而后咱们来看看 Blink 有哪些线程：
首先 Blink 渲染器会有一个主线程，其次会有 N 个 Worker 线程和一些外部线程。
其中所有的 js 计算、DOM 解析、CSS 解析、款式和布局计算都是在主线程中实现的。
那么这里就能够必定一点，大部分的渲染工作都是在主线程中实现的（只有 1 个线程）。然而这个过程中并没有合成器和光栅化这些性能，因为他们都是在独自的线程。
三、渲染过程
提到合成器，就须要说到整个渲染流程，其实就是下图所示的流程。能够看到，在主线程实现到布局计算之后，进行真正的页面绘制是通过合成线程来实现的。那么这里就曾经呈现 2 个次要的线程了，主线程与合成线程。下图中能够看到在合成的过程中，呈现了 raster，也就是光栅化的过程。
鉴于文档可能并没有说齐全，咱们须要找更多文档来佐证这样的形容是否正确。
Life of a Pixel
这篇文档中也提到了，在 paint 之后即是 raster，raster 是在 GPU 过程中实现的。网上的材料又查到 raster 是一个线程池，对于这个说法我没找到官网的形容，于是咱们能够关上 F12，应用 Performance 来印证一下，发现的确如此。
四、印证后果
通过 Performance 的印证，目前咱们发现了三个次要线程（Raster 为线程池），Main/Compositor/Raster。
然而很显著咱们在 Performance 中还能看到 Chrome_ChildIOThread 等其余线程，然而从官网文档来看，至多波及到渲染的过程，咱们能够总结出 3 个：即主线程，合成器线程，光栅化线程池。
至于其余的网络申请 /IO/Frame 等线程，是如何工作的以及作用面有多广，临时没有钻研过。
五、Gecko
还有 Firfox 的 Gecko 渲染器，能够参考下
FireFox Rendering Overview