浏览器的渲染原理？

什么是浏览器渲染？

浏览器的渲染就是把一个html的字符串，渲染成为一个页面。

浏览器是怎么渲染的呢？

（网络线程，html文档，渲染任务，渲染主线程，消息队列，事件循环）

当浏览器的网络线程拿到HTML文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环的机制作用下，渲染主线程取出消息队列的渲染任务进行渲染流程。

渲染流程？

HTML解析、样式计算、布局、分层、绘制、分块、光栅化、画 。

1、HTML解析：parse

遇到css解析css，遇到JS执行JS。
CSS解析会放在预解析进程不会阻塞HTML解析，JS 会阻塞HTML的解析，当网络线程下载完JS才会继续解析HTML，最后生成DOM树，和CSSOM树。

1.CSS的解析

2. JS的执行

2、样式计算：style

主线程会遍历DOM树，为树上的每个节点计算出它最终的样式。（很多预设值会变成绝对值,red变成rgb(255,0,0)，相对单位会变成绝对单位，em变成px,）

3、布局：Layout

布局阶段会一依此遍历DOM树的每一个节点计算每个节点的几何信息。例如节点的宽高，相对包含块的位置，大部分时候DOM树和布局树并非一一对应，比如display：none的节点没有几何信息，因此不会生成布局树，又不如伪元素选择器，匿名行盒，匿名块盒等等。

4、分层:Layer

主线程使用一套复杂的策略对应整个布局树种进行分层。
分层的好处是将来某一层改变后，仅仅会对该层进行后续处理，从而提高效率。
滚动条，堆叠上下文，transform,opacity,等样式都会或多或少的影响分层结果，也可以will-change属性更大程度的影响分层结果。

5、绘制-paint

绘制指令集，用于描述这一层的内容该如何画出来。

6、分块-Tiling

完成绘制后，主线程将每个图层的绘制信息提交给合成线程，合成线程将对每个图层进行分块，将其划分为更多的小区域。

6、光栅化-Raster

将每个块变成位图，优先处理靠近视口的块。
GPU进程开启多个线程进行光栅化

7、画-Draw

合成线程拿到每个层，每个位图后，生成一个个指引信息，指引标识出每个位图应该画到屏幕的那个位置。以及会考虑到旋转，缩放等变形。变形发生在合成线程，与渲染主线程无关，这就是transform效率高的本质原因。合成线程回把quad提交给GPU进程，由GPU进程产生系统调用，提交给GPU硬件，完成最终的屏幕成像

记录：渲染进程（沙盒）
        渲染主进程
        合成线程