3D渲染详细过程
造成3D渲染每日任务，打开3D渲染步骤
当浏览器互联网进程接到 HTML 文本文档后，也会产生一个3D渲染每日任务，并把它传达给3D渲染主线程的线程池。
在事件循环体制的影响下，3D渲染主线程取下线程池里的3D渲染每日任务，打开3D渲染步骤。
全部3D渲染步骤分成好几个环节，各是： HTML 分析、款式测算、合理布局、分层次、制作、分层、光栅化、画
每一个阶段都有明确输出，上一个环节的输出将会成为下一个阶段的键入。
那样，全部3D渲染步骤就形成了一套组织严密的自动生产线。
HTML文本文档分析
3D渲染的第一步是分析 HTML文本文档。
分析全过程中碰到HTML原素会分析HTML原素最后形成DOM树，碰到 CSS 会免费下载并分析 CSS，碰到 JS会中止分析HTML，而是先免费下载并实施 JS。为了保证分析高效率，电脑浏览器在进行分析前，会开启一个预解析的进程，首先免费下载 HTML 里的外界 CSS 文件或 外部 JS 文档。
形成DOM树
分析的过程中出现HTML原素会分析HTML原素最后形成DOM树；
形成CSSOM树
分析的过程中出现style标识、link元素、业内款式等CSS款式，会分析CSS形成CSSOM树。
CSS不容易堵塞HTML分析
假如主线程分析到link部位，这时外部 CSS 文档还没有下载分析好，主线程不容易等候，再次分析后续 HTML。主要是因为免费下载和分析 CSS 的工作是在预解析进程中所进行的。这便是 CSS 不容易堵塞 HTML 分析的主要原因。
JS会堵塞HTML分析
假如主线程分析到script部位，会终止分析 HTML，继而等候 JS 压缩文件下载好，并把全局性代码解析实行结束后，才可以分析 HTML。主要是因为 JS 代码的执行过程可能改动现阶段的 DOM 树，因此 DOM 树形成务必中止。这便是 JS 会堵塞 HTML 分析的主要原因。
第一步结束后，也会得到 DOM 树和 CSSOM 树，浏览器默认设置款式、内部结构款式、外界款式、业内款式均会包含于 CSSOM 树中。
款式测算
3D渲染的下一步是款式测算
主线程会赋值所得到的 DOM 树，分别为树里的每个节点算出它最后的样式，称作 Computed Style。
在这一过程中，许多设定值就会变成平方根，例如red就会变成rgb(255,0,0)；相对性企业就会变成肯定企业，例如em就会变成px
这一步结束后，也会得到一棵含有款式的 DOM树。
合理布局
接着是合理布局，合理布局进行之后获得合理布局树。
合理布局环节会先后赋值 DOM 树的每一个连接点，测算每个节点的几何图形信息内容。比如节点宽高比、相对性包括块部位。
大多数时候，DOM 树和合理布局树并不是一一对应。
例如display:none的节点并没有几何图形信息内容，因而不容易形成到合理布局树；再比如用了伪元素选择符，尽管 DOM 树当中存有这种伪元素连接点，但是它们有着几何图形信息内容，因此会形成到合理布局树中。也有密名行盒、密名块盒这些都会造成 DOM 树和合理布局树没法一一对应。
分层次
下一步是分层次
主线程会用一套繁杂的对策对整个合理布局树中开展分层次。
分层次的好处是，未来某一个层更改后，仅会让该层开展后续处理，进而提升工作效率。
下拉列表、层叠前后文、transform、opacity 等款式都是会或多或少危害分层次结论，还可以通过will-change特性更多方面产生的影响分层次结论。
制作
再下一步是制作
主线程能为每一个层独立造成制作指令系统，用以叙述这一层内容该如何画出来的。
进行制作后，主线程将每个涂层的制作信息内容递交给生成进程，剩下工作中会由生成进程进行。
分层
生成进程最先对每一个图层开展分层，把它区划为更多的小地区。
它是从线程池中取放好几个进程去完成分层工作中。
光栅化
分层结束后，进到光栅化环节。
生成进程会把块信息内容交到 GPU 过程，以非常高的速率进行光栅化。
GPU 过程会打开好几个进程去完成光栅化，而且优先处理接近视口区域内的块。
光栅化得到的结果，便是一块一块的位图文件
画
最后一个环节便是画了
生成进程取得每一个层、每一个块位图文件后，形成一个个「引导（quad）」信息内容。
引导会标志出每一个位图文件应当画到显示器的什么位置，及其会充分考虑转动、放大等变型。
变形发生在生成进程，与3D渲染主线程不相干，这便是transform效果好的实质缘故。
生成进程能把 quad 递交给 GPU 过程，由 GPU 过程造成系统进程，递交给 GPU 硬件配置，进行最后的屏幕显像。
全部3D渲染的一体化全过程大概如下图所示：
常见面试题
什么叫 reflow？
reflow 的本质就是重算 layout 树。
当展开了会影响到合理布局树实际操作后，必须重算合理布局树，会引起 layout。
为了防止连续不断的数次实际操作造成合理布局树反复计算，电脑浏览器会合拼这种实际操作，当 JS 编码顺利完成之后再进行统一测算。因此，修改特性所造成的 reflow 是多线程完成。
也是一样由于这般，当 JS 获得合理布局特性时，就可能导致无法获取到最新合理布局信息内容。
电脑浏览器在反复衡量下，最后决定获得特性马上 reflow。
什么叫 repaint？
repaint 的本质就是再次依据分层次信息计算了制作命令。
当修改了由此可见款式后，那就需要重算，会引起 repaint。
因为元素合理布局信息内容也是属于由此可见款式，因此 reflow 一定会造成 repaint。
为何 transform 的高效率？
由于 transform 不仅不会危害合理布局也不影响制作命令，它危害的是3D渲染步骤的最后一个draw环节
因为 draw 环节在生成进程中，因此 transform 的改变基本上也不会影响3D渲染主线程。相反，3D渲染主线程不管怎样繁忙，也不影响 transform 的改变。
