CSSOM 和 DOM 构建是否发生在并行线程上？

Question

我在网上寻找这个答案很长时间。但这个问题没有得到具体答案。我想知道每个进程在渲染中如何工作（即使用多线程或单线程）

Answer 1

为了渲染页面，浏览器必须执行多个复杂的步骤，一般来说，这些步骤是：解析/加载、样式计算、创建布局树、绘制，最后是光栅化（在这一步中，浏览器获取生成的结果）从前面的所有步骤中获取信息，并将该信息转换为在屏幕上绘制的彩色像素）。

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

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

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

绘画到来之后，也发生在主线程中，并且再次需要之前的结果作为其输入，因此不能与布局创建并行，在这一步中浏览器为整个布局树创建绘画结构。

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

合成器线程不仅用于初始渲染，而且还可以在主线程想要渲染内容的任何时候使用。事实上，当你滚动时，你是在合成器线程上滚动，最近 chromium 已经将很多东西移动到合成器线程，这样即使主线程被阻塞，ui 仍然表现得很流畅。如果您想了解有关合成器线程的更多信息，您还可以查看此链接（以及我之前共享的链接）