浏览器是如何渲染页面的？为什么会有重绘与回流？为什么总说 transform 效率高？

当浏览器的网络线程收到HTML文档后，产生一个渲染任务，并将其传递给渲染主线程的消息队列

在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程(流水线)

渲染流程分为多个阶段(渲染流水线)：

HTML字符串--解析HTML--样式计算--布局--分层--绘制--分块--光栅化--画--像素信息(呈现的画面)

1.解析-parse

HTML--->parse--->DOM树 CSSOM树

为了提高效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载HTML中的外部CSS和JS文件

如果主线程解析到 link ，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML ，因为下载和解析CSS的工作是在预解析线程中 进行的，所以CSS不会阻塞HTML的解析

如果主线程解析到 script ，此时会停止解析 HTML ，转而等待 JS 文件下载好，并将全集代码解析执行完成后，才能继续解析HTML，因为 JS 代码的执行过程中可能会修改当前的 DOM 树，所以 DOM 树的生成必须暂停 ，因此 JS 会阻塞 HTML 解析

2.样式计算-style

主线程会遍历得到的 DOM 树，依次为树中的每个节点计算出它的最终样式 -- Computed Style

在这过程中，很多预设值会变成绝对值，比如red会变成 rgb(155,0,0)；相对单位会变成绝对单位 ，em--px

这一步结束之后会得到一颗带有样式的 DOM 树

3.布局-layout

布局阶段会依次遍历 DOM 树的每一个节点，计算每个节点的几何信息(尺寸和位置)

大部分时候，DOM树和布局树并非一一对应

比如 ::before不存在于DOM树中，但是存在于布局树中

4.分层-layer

主线程会对整个布局树中进行分层

好处在于，将来某一个层改变后，仅会对该层进行后续处理，从而提升效率

滚动条、堆叠上下文、transform、opacity 等样式都会或多或少的影响分层结果，也可以通过will-change属性更大程度的影响分层结果

5.绘制-paint

主线程会为每个层单独产生绘制指令集，用于描述这一层的内容该如何画出来

完成绘制后，主线程讲每个图层的绘制信息提交给合成线程，剩余工作由合成线程完成

合成线程首先对每个图层进行分块，将其划分为更多的小区域

它会从线程池中拿取多个线程来完成分块工作

6.光栅化-raster

合成线程将块信息交给GPU进程，以极高的速度完成光栅化

GPU进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块

光栅化的结果就是一块一块的图

7.画-draw

合成线程拿到每个层、块的位图之后，生成多个指引信息

指引会标识出每个位图应该画到屏幕的哪个位置，也会考虑到旋转缩放

变形发生在合成线程，与渲染主线程无关，这就是transform效率高的本质原因

合成线程把指引信息提交给 GPU 进程，由 GPU 进程产生系统调用，提交给 GPU 硬件，完成最终的屏幕成像

什么是回流reflow？

reflow本质是重新计算 layout树(布局树)

当进行了影响布局的操作，需要重新计算布局树，就会引发 layout，为了避免连续多次操作导致布局树反复计算，浏览器会合并这些操作最后统一计算，因此改动属性造成得到 reflow 是异步完成的

因此 JS 获取布局属性时，可能造成无法获取到最新得到布局信息

什么是重绘repaint？

repaint 本质就是重新根据分层信息计算了绘制指令

改动可见样式后，就需要重新计算，就会引发 repaint

因此 reflow 一定会引起 repaint

为什么 transform 效率高？

渲染主线程：解析--样式计算--布局--分层--绘制-------------------->

合成线程：---------------------------------------分块--光栅化--画->

因为变形发生在合成线程，与渲染主线程无关，transform 影响的只是渲染流程的最后一个'画'阶段，因此渲染主线程无论多忙都不会影响到 transform 的变化

注： 该文章内容来源于渡一袁进老师