图解浏览器渲染过程 - 基于Webkit/Blink内核Chrome浏览器

[abcrun]

Chrome基于Webkit内核进行封装，采用了多进程/线程模型。当用户访问网页时，大致的流程是这样的：

打开浏览器，Browser进程启动，首先由UI线程来处理界面基本信息(如创建tab页等)，当用户输入URL后，UI线程将任务交给IO线程来处理，然后将结果传递给Render进程，Render进程的IO线程经过简单分析后，将解释后的结果交给渲染线程，渲染线程接受请求加载网页并渲染网页。在加载和渲染过程中，可能会需要Browser进程获取相关的资源(如果CSS文件，图片，音频视频等)和GPU进程帮助渲染，这时Render进程会通过IO线程通知Browser进程或者GPU进程进行相关的任务。详细的过程随后将会以图片形式详细说明。

Chrome浏览器多进程/线程模型

Chrome浏览器包含多个进程，其中Browser进程是主进程，管理着各个Tab页，UI操作，资源请求等；Render进程主要用于渲染网页，Render进程可以包含多个；GPU进程用于处理渲染硬件加速；而NPAPI和Pepper进程与浏览器插件相关。

资源请求与加载过程

当用户访问某一地址时，可以分为两种情况：

1. 根据是否有本地缓存(本地缓存是否需要更新)来请求网络资源
2. 当点击前进/后退按钮时，从浏览器缓存池里面判断是否有缓存资源，如果没有则需要网络请求

页面资源有好多种，每种资源都有对应的资源加载器，如图片资源加载器imageLoader，在解析过程中当需要加载资源时，render进程会通知Browser进程加载资源，然后将加载后的资源通知给render进程。关于渲染过程见下图。

渲染过程

由于渲染的内容比较多，图片也比较大，为了便于阅读，我将图片分成三部分展示，最后也会附上渲染过程的全图。

HTMLParser -> DOM

首先是HTMLParser创建DOM树的过程，Render进程会创建一个html解释线程用于分析经过浏览器转码后的字符串，经过词法分析，安全处理等，然后调用主进程构建DOM树。当解释后是Script脚本时将会阻塞渲染线程,调用Javascript线程执行脚本代码，当然此时chrome为防止阻塞影响到后面可能存在的资源加载，会与扫描后面的代码是否有需要加载资源的，如果有则交个Browser进程去加载资源，然后才执行Script代码；如果遇到CSS样式代码时，将会对CSS样式规则进行解析保存到DocumentRuleSets对象中备用，便于创建Node节点时构建RenderObject和RenderLayer使用。

RenderObject

上面谈到的保存的样式规则对象(DocumentRuleSets)，在创建DOM树Node节点元素后，Element会依次调用attach函数检测是否需要创建RenderObject对象，RenderObject对象从DocumentRuleSets里查找当前元素匹配的所有样式规则并排序，计算出当前节点的位置等最终的样式信息保存在RenderObject对象中。

RenderLayer与渲染绘制

网页本身包含框结构和层次结构，框结构主要是指iframe，而层次结构就是这里说的renderLayer了，网页分成不同的层次主要是出于渲染考虑的，图中有详细说明。

渲染全图(图片较大)

说明：如果想理解更多细节，可以参考《Webkit技术内幕》，这篇文章也是在这本书的基础上总结的。

[tiansn]

图文并茂，之前看到的没有讲的这么详细的

[Right10Arthur]

一张好的思维导图还是能让分解知识的效率提高不少，大大啊，你这思维导图是用什么软件画的呢？

[abcrun]

@ArthurBinZhou OmniGraffle

[Right10Arthur]

谢了