一、渲染时间点。
当浏览器的网络线程收到html文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染线程取出消息队列中的渲染任务，开启渲染流程Renderer（线程是Theread）。
二、渲染流水线。
三、解析HTML——Parse HTML
将HTML解析为DOM树和CSSOM树。
(一)HTML标签解析生成DOM节点，构建DOM树。
(二)CSS被解析为样式表,构建CSSOM树。 
(三)问题
HTML 解析过程中遇到 CSS 代码怎么办？
为了提⾼解析效率，浏览器会启动⼀个预解析器率先下载和解析 CSS
HTML 解析过程中遇到 JS 代码怎么办？
渲染主线程遇到 JS 时必须暂停⼀切⾏为，等待下载执⾏完后才能继续 预解析线程可以分担⼀点下载 JS 的任务
三、计算样式——Recalculate Style
根据构建的DOM树和CSSOM树计算样式，构建渲染树
四、布局——Layout
在渲染树上运行布局以计算每个节点的几何体,确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置，构建Layout树。
DOM树和Layout树不一定是一 一对应的。原因：
1.可能会包含display:none
2.可能会存在::before和::after伪元素。
3.存在匿名盒
五、分层——Layer
六、绘制 - Paint
这⾥的绘制，是为每⼀层⽣成如何绘制的指令
渲染主线程的⼯作到此为⽌，剩余步骤交给其他线程完成
七、分块——Tiling
分块会将每⼀层分为多个⼩的区域
分块的⼯作是交给多个线程同时进⾏的
八、光栅化 - Raster
光栅化是将每个块变成位图，优先处理靠近视⼝的
此过程会⽤到 GPU 加速
九、画 - Draw
合成线程计算出每个位图在屏幕上的位置，交给 GPU 进⾏最终呈现
完整过程
十、常见问题。
1.什么是 reflow (回流)？
当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。【重新排列布局，即打碎重组】
reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。
2.什么是 repaint(重绘) ？
当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式。这个过程叫做重绘。
repaint 的本质就是重新根据分层信息计算了绘制指令。当改动了可见样式后，就需要重新计算，会引发 repaint。由于元素的布局信息也属于可见样式，
所以 reflow 一定会引起 repaint。
3.为什么 transform 效率⾼？
因为 transform 既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个「draw」阶段。由于 draw 阶段在合成线程中，所以 transform 的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌，也不会影响 transform 的变化。
