浏览器工作原理-渲染流程

浏览器工作原理-渲染流程（浏览器是怎么将html、css、js转换为页面的）

渲染的流水线是：构建dom树，样式计算、布局、分层、绘制、分块、光栅化、合成。

每个阶段都有输入、处理、输出。三个阶段。

构建DOM树

输入：我们的html结构

处理：将html结构的文本转换为浏览器可识别的dom树。

输出：dom树

dom树是什么样的？

• 在浏览器console中打印一个document这个就是一个dom树、

样式计算

我们的dom树有了就需要有样式的计算

输入：我们的样式源，link引入、style标签包的、内嵌的style

处理：接收到这些东西之后将我们写的样式转换为浏览器可以识别的结构-叫做styleSheet

输出：styleSheet

styleSheet是什么样的？

在浏览器console中打印一个document.styleSheet这个就是浏览器识别的样式。

布局

布局是根据dom树和styleSheet计算出元素的几何位置。

输入：dom树和styleSheet。

处理：chrome在布局阶段经历两个步骤：创建布局树和布局计算。

• 创建布局树，根据dom和styleSheet，不可见的元素会被移除。不包含的布局树里面。

• 布局计算 通过计算得到每个元素的几何位置

输出：布局树

分层

页面中有层次结构，还有3D效果，所以这里需要将页面根据层级具体分层。

输入：布局树

处理：提取出其中拥有层叠属性和会出现裁剪的元素，

输出： 图层

图层绘制

输入：图层

处理：将每个图层拆分为多个绘制指令、绘制顺序列表。

输出：绘制指令列表

栅格化操作

什么是栅格化？

是指将图块转换为位图。

输入：绘制指令列表

处理：将绘制指令列表提交给合成线程。按照视口附近的图块来优先生成位图。

输出：位图块

合成显示

输入：位图块。

处理：合成线程将位图块拿到之后，就会产生一个绘制的指令给到浏览器主线程。

输出：我们的页面、

渲染流水线总结

用一句话来总结渲染的流水线：

浏览器拿到html之后，将html转换为dom树，然后计算出样式，通过dom树和styleSheet生成布局树，根据布居树将页面元素分层，在将每个图层拆解成多个图块（包含了绘制指令，绘制位置等），经过栅格化。将图块转换为位图块，最后拿到位图块，浏览器就可以开始渲染了。这是整个流程。也是浏览器的渲染原理。

重排、重绘、合成

在我们使用js去操作dom、css元素的属性更改样式，或者dom结构会触发这些东西，每一类触发都会导致不一样的结构。

• 重排： 其实是我们更改dom的元素几何位置，就会触发重排，然后又会经历之后的所有流程。

• 重绘，重绘在计算几何位置之后，触发重绘肯定会比触发重排快。

• 合成。修改的是只会触发合成的元素。