在谈论浏览器的多进程体系结构之前，让我们谈谈过程和线程的概念。
该过程是系统的基本单元，用于安排和分配资源调度和分发。一个过程可以被视为程序的运行示例。启动程序时，操作系统将为程序创建一个存储器以存储代码，运行数据以及执行任务的主要线程。我们称之为这样的操作环境。
线程取决于该过程，并且是操作系统可以识别的最小执行和调度单元。在此过程中使用多线程并行处理可以提高运行效率。多线程可以并行处理任务，但是线程不能单独存在。该过程是启动和管理的。我们最熟悉的JS的操作是线程的维度。
这是过程和线程之间的一些差异：
我认为使用火车隐喻过程和线程的过程与图像进行了比较：过程就像火车一样，线程就像汽车一样，火车有许多汽车。
Chrome浏览器包括：1个浏览器进程，1个GPU进程，1个实用程序过程，多个渲染器进程和多个插件进程。
渲染过程的核心工作是将HTML，CSS和JavaScript转换为一个网页，用户可以与之进行交互。在此工作中，输入HTML通过一些子阶段，最后输出像素。，这些子阶段可以大致分为：构建DOM树，计算样式，布局，分层，绘图，块，网格和合成。
当渲染过程开始接收HTML数据时，主线程开始解析HTML并将其转换为浏览器可以理解的DOM树结构。
在对DOM树的分析（如果遇到IMG，CSS或JS资源）的分析过程中，主线程将向网络线程发送请求到浏览器的主进程以获取相应的资源。
当在解析过程中遇到标签时，主线程将暂停HTML的分析，以加载，分析和执行JS代码。由于JS代码可能涉及页面结构的修改，因此主线程必须等待为了使JS运行以恢复HTML文档的分析。因此，我们可以使用异步或延期属性运行JS代码异步到标签，以避免对JS阻止HTML的分析。
样式计算的目的是计算DOM节点中每个元素的特定样式。在计算过程中，您需要遵守CSS的继承和层重叠。这个阶段可以分为三个步骤以完成：
在浏览器中，我们可以通过计算面板查看当前节点的计算样式。
对于与DOM树和DOM相对应的计算样式，它不足以显示页面。接下来，您需要计算DOM树中可见元素的几何位置。此计算过程称为布局。
Chrome需要在布局期间完成两个任务：创建布局树和布局计算。
在布局树之后，已经绘制了一些简单的页面，但是对于我们的现代页面，有许多复杂的效果，例如一些复杂的3D转换，z索引作为z轴排序等。，渲染引擎还将为特定节点生成专用层，并生成相应的层树。
应该注意的是，每个节点都包含一层。如果节点没有相应的层，则该节点属于父节点所在的层。在末端，每个节点将直接或间接下属从属于层。
通常满足以下两点，将晋升为单独的一层：
我们可以在浏览器的“图层”面板上看到当前页面的分层：
DOM树，计算样式和布局树仍然不足以绘制页面。这里也有明确的绘画顺序。在此过程中，主线程将穿越布局树并创建图形记录。
同样，我们可以在浏览器的“图层”面板上看到当前页面的绘图记录：
确定布局树并创建图层和相应的绘图顺序后，主线程将向合成线程提交信息。合成线将删除每层光栅。
由于我们浏览器的视口有限，因此页面的长度可能很长，并且某些层可能会超过很多视口。用户对页面的感知是视图端口的维度，因此，合成线程将分为层。
使用该块，合成线将将每个块发送到栅格线程，并且光栅线将在每个零件中磨碎，并且有GPU内存。在此过程中，合成线将优先考虑视口中的块将其提交给光栅线。
光栅完成后，合成线程将通过IPC通信为浏览器过程创建合成框架。浏览器进程接收指令后，内容将在内存中绘制并在屏幕上显示。
在这一点上，从接收HTML数据到页面的整个过程已经结束。您将浏览器的渲染过程结合在一起，以查看重新，重新绘制和合成的内容。
当我们通过JS或CSS属性（例如元素的宽度和高度）更新元素的几何属性时，浏览器将重新触发布局并重新执行所有渲染过程。
当我们通过JS或CSS更新元素的图形属性时，例如元素的背景颜色，文本的颜色等。此时，省略了布局和分层阶段，仅执行后续过程。本质
为什么我们要使用CSS3转换和其他属性来避免重新排序并重新启动？因为此时将跳过整个主线程的整个过程，将执行后续过程，然后将其移交后续过程为了实现无法占据执行线程，光栅线程和GPU进程上主线程的资源，因此效率是最高的。
原始：https：//juejin.cn/post/7097115557526241294