javascript - CSSOM 和 DOM 构造是在并行线程上进行的吗？

Question

我在网上找了很久这个答案。但没有得到这个问题的具体答案。我想知道每个进程在渲染中是如何工作的(即使用多线程或单线程)

Answer 1

为了呈现页面，浏览器必须 do multiple complex steps ，一般来说，这些步骤是:解析/加载、样式计算、创建布局树、绘制，最后是 Rasterisation (在这一步中，浏览器获取前面所有步骤生成的结果，并将该信息转换为在屏幕上绘制的彩色像素)。

简而言之，在解析/加载步骤中，主线程开始解析 html，并创建 dom 树，当它到达 - 甚至达到峰值 - 外部资源时，它开始在后台网络线程中加载这些资源(秒)。除非您推迟加载这些资源，否则浏览器仍需要在进行下一步之前解析/执行它们。

在样式计算步骤中，浏览器为每个节点确定样式，这也是在主线程中发生的，需要在dom创建之后发生。样式不能与 dom 解析并行计算，因为样式需要基于 css 选择器计算，而如果 dom 树没有完全结构化并准备好被读取，css 选择器就毫无意义——直到样式声明出现的那一点。

样式计算完成后，浏览器开始创建布局树——您可以将布局树想象成一个由较小的矩形组成的巨大矩形网格，浏览器知道每个元素的位置以及整个网格中的哪个小矩形，以及 x、y 坐标和边界框大小。这一步也发生在主线程中，不能与样式计算并行，因为它需要 dom 和 cssom 作为输入才能产生它的输出。

在绘制之后，同样发生在主线程中，又需要之前的结果作为输入，因此不能与布局创建并行，在这一步浏览器为整个布局树创建绘制结构。

浏览器从这里将所有这些信息提交给 Compositor thread ，这是并行事情开始发生的地方，合成器线程知道如何获取布局树，并将其合成到您看到的帧中。合成器线程非常聪明，它知道如何确定工作负载的优先级和并行化，它将其工作负载发送到不同的光栅化线程，这些线程负责为您提供在屏幕上绘制的彩色像素。

Compositor 线程不仅用于初始渲染，而且在主线程想要渲染内容时随时使用。事实上，当你滚动时，你是在合成器线程上滚动，最近 chromium 已经将很多东西移动到合成器线程，所以即使主线程被阻塞，ui 仍然表现得很流畅。如果您想了解有关合成器线程的更多信息，您还可以查看 this link (连同我 previously shared )