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

Question

我在网上寻找这个答案已经很长时间了。但没有得到这个问题的具体答案。我想知道每个进程在渲染中是如何工作的(例如，使用多线程还是单线程)

Answer 1

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

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

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

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

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

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

合成器线程不仅用于初始渲染，还可以在主线程想要渲染的任何时候使用。实际上，当你滚动的时候，你是在compositor线程上滚动，最近chromium一直在向compositor线程移动很多东西，所以即使主线程被阻塞了，ui仍然可以流畅地运行。如果您想了解有关合成器线程的更多信息，还可以查看this link (以及我的previously shared)。