浏览器的渲染原理解析

浏览器的渲染原理：

总共分为八个步骤,解析html->样式计算->布局->分层->绘制->分层->光栅化->画
也可以分为三大块：解析->布局->绘制

1. 解析

①解析html会得到dom树和cssom树。解析过程中遇到css解析css，遇到js执行js，为了提高效率，会启动以后预解析线程来先下载html中外部css文件和js文件。css不会阻塞html解析，但js会阻塞html解析，因为下载和解析css是在预解析线程中进行，js代码可能会修改当前dom树，所以dom树生成会暂停。
②样式计算后会得到一个带有样式的dom树。主线程遍历得到的dom树，依此为树中的每个节点计算出它的最终样式，称为computed
style。在这个过程中，很多预设置会变成绝对值，比如说red会变成rgb(255，0，0)，相对单位会变成绝对单位，比如em会变成px。

2. 布局

③布局完成后会都得到一个布局树。布局阶段会依次遍历dom树的每一个节点，计算每个节点的几何信息。大部分的时候，dom树和布局树并非一 一对应。比如说dispaly：none的节点没有几何信息，就不会生成到布局树，又比如使用了伪元素选择器，虽然dom树中不存在这些伪元素，但他们拥有几何信息，所以会生成到布局树中。
④主线程会使用一套复杂的策略对整个布局树中进行分层。分层的好处在于，将来对某一个层发生改变后，仅会对该层进行后续处理，从而提高效率。像滚动条、transform等样式都会对分层结果有或多或少的影响。

3. 绘制

⑤.主线程会为每个层单独产生绘制指令集，用于描述这一层内容该如何画出来。完成绘制后，主线程将每个图层的绘制信息交给合成线程。
⑥.合成线程首先对每个图层进行分块，将其划分为更多的小区域。分块完成后，进入光栅化。
⑦.合成线程会将块信息交给cpu进程，以极高的速度完成光栅化，cpu进程将会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。
⑧.合成线程会拿到每个层，每个块的位图后，生成一个指引(quad)信息。指引会标出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。最后合成线程会把quad提交给cpu进程，由cpu进程产生系统调用，提交给cpu硬件，完成最后的屏幕成像。