浏览器是一个神奇的盒子，他包罗万象，海纳百川，既可以绘制动效，还可以查看音视频；那，这么神奇的盒子又是怎么进行渲染工作的呢？接下来我们一起了解一下浏览器的渲染原理。

渲染就有渲染引擎，Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari使用webkit，chrome使用由webkit优化后的blink进行渲染。本文主要针对webkit渲染引擎进行讲解。

了解了渲染引擎，我们再来了解一下进程和线程：

进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位.

线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位.线程自己基本上不拥有系统资源,只拥有一点在运行中必不可少的资源(如程序计数器,一组寄存器和栈),但是它可与同属一个进程的其他的线程共享进程所拥有的全部资源.

一个线程可以创建和撤销另一个线程;同一个进程中的多个线程之间可以并发执行。

目前市场上大部分的浏览器都是多进程(早期浏览器为单进程).

浏览器进程包括缓存进程、网络进程、GPU进程、插件进程、渲染器进程等。

浏览器进程中的UI线程根据浏览器输入的内容进行不同进程的执行，如果输入的是网址，则UI线程会启动一个网络线程来请求DNS域名解析获取数据，如果输入的是关键词搜索直接跳转至默认搜索引擎进行关键词搜索。接下来，我们进入DNS获取数据后的渲染流程。

当网络线程获取到数据后，会根据SafeBrowsing来检查站点是否为恶意站点，如果是恶意站点，则会弹出安全提示，浏览器会阻止用户继续访问，当然用户也可以强行继续访问。SafeBrowsing可自行查阅谷歌词典，为谷歌开发一套站点安全系统。

检测通过后，网络线程会通知UI线程数据请求完毕，可以进入下一步了，然后UI线程会创建一个渲染器进程(Render Thread)来渲染页面。浏览器进程将会通过IPC管道将数据传递给渲染进程，正式进行页面的渲染，将js、html、css、iamge等资源渲染成用户可以交互的web界面。

渲染器进程中的主线程将对Html进行解析，构造DOM数据结构，形成DOMTree，注意js的执行也是在主线程中进行， 所以需要注意引入js的时机和顺序，防止js阻塞DOMTree的形成。当然也可以采用async或者defer等方式异步加载js（自行查阅async和defer）

主线程在获取DOMTree后还不知道页面长什么样子，所以需要进行CSS解析，来形成CSSOM规则解析树，以读取CSS样式表

解析完CSSOM和DOMTree，主线程通过遍历DOM和经过计算好的规则样式表，会结合形成layoutTree，也就是构造树，layoutTree上的每一个节点都记录了x,y的坐标位置和边框尺寸

形成LayoutTree后，主线程会遍历layoutTree创建一个绘制记录表，如下图，该表记录了绘制的顺序,接下来就要进行像素的绘制和渲染了，这种行为被称为栅格化。

主线程遍历layoutTree生成layerTree，即所谓的绘制层，主线程在生成绘制层和确认绘制顺序后，主线程会讲这些进程传递给合成器线程，由合成器线程将每个图层进行栅格化。

接下来我们进入合成器线程，图层的尺寸或者空间比较大，可能占满整个页面， 因此，合成器线程会将图层切分为多个图块，也就是tiles，然后将每个图块发送给栅格化线程，进行栅格化，栅格化后的图块存储在GPU内存中。

当图层栅格化完成后，合成器线程会收集名为“draw quads”的图块信息，根据图块信息，生成一个合成器帧，合成器帧通过IPC通道传递给浏览器进程，然后浏览器进程将合成器帧再传送给GPU进程进行渲染，此时，页面就完成了渲染。

综上，我们来总结一下浏览器的渲染原理（流程）

1、渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。

2、渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。

3、创建render树，并计算元素的布局信息。

4、对布局树进行分层，并生成分层树。

5、为每个图层生成绘制列表，并将其提交到合成线程。

6、合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。

7、合成线程发送绘制图块命令 DrawQuad 给浏览器进程。浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

留个小问题，为什么浏览器渲染，要尽量避免重绘和重排？如何通过动画进行浏览器渲染性能的优化？答案将在下期文章中解答，好了，今天的分享就到这里了，感兴趣的小伙伴可以关注我哦。