一、前言以Chrome目前使用的渲染器Blink为例,它也是Webkit的一个分支。先贴出官方文档HowBlinkworks。首先,我不会C++,所以无法通过自己搭建浏览器并研究其中的每一部分来解释浏览器中线程的工作原理。我只能用我已经了解了,更权威的文档会告诉你。我发布的所有文档都来自Chromium官方文档中的链接。2、Blink的线程机制接下来,我们从官方的角度来权威解读一下:首先明确Blink要完成一个网页渲染需要做什么:实现Web标准,即W3C和一些标准组织的规范。包括HTML、DOM、CSS等。嵌入V8引擎,执行JS请求网络资源,构建DOM树,计算样式和布局,嵌入合成器,绘制图形,然后我们看看Blink有哪些线程:首先,Blink渲染器会有一个主线程,然后会有N个Worker线程和一些内部线程。所有的js计算、DOM解析、CSS解析、样式和布局计算都在主线程中完成。所以这里我们可以确定大部分的渲染工作是在主线程中完成的(只有1个线程)。但是这个过程中没有compositor和rasterizer函数,因为它们都在单独的线程中。3.渲染过程说到合成器,就要说到整个渲染过程,其实就是下图所示的过程。可以看出,主线程完成布局计算后,真正的页面绘制是通过合成线程完成的。那么这里已经有两个主线程了,主线程和合成线程。在下图中,大家可以看到在合成过程中,出现了一个光栅,也就是光栅化过程。由于文档可能不完整,我们需要找到更多的文档来证明这个描述是否正确。LifeofaPixel文档中也提到,paint之后就是光栅,光栅是在GPU进程中完成的。网上的资料也查到raster是一个线程池。我没有找到官方对这个说法的描述,所以我们可以打开F12用Performance来确认一下,发现确实是这样的。4.确认结果通过Performance的验证,我们找到了三个主线程(Raster是线程池),Main/Compositor/Raster。但是在Performance中明明可以看到Chrome_ChildIOThread等其他线程,但是从官方文档来看,至少在渲染过程中,我们可以总结出三个:主线程,合成器线程,光栅化线程池。至于其余的networkrequest/IO/Frame线程,它们是如何工作的,使用范围有多大,我还没有研究过。5.Fifox的Gecko和Gecko渲染器,可以参考FireFoxRenderingOverview
