在学习HTML的过程中，最大的建议是将标签写入头部和标签，就像规格是这样。
让我们今天讨论一下，这种方式的写作是什么？浏览器如何逐步绘制html文档进入色彩页面？
从接收HTML文件到显示华丽的页面，浏览器经历了以下6个步骤：
Webkit主过程
壁虎主过程
尽管Webkit和Gecko使用的术语略有不同，但该过程基本上是相同的。
当您看到上面的主流旅程时，您可能会想知道。解析HTML时，为什么要将字符串转换为令牌？什么是令牌？不可能直接分析HTML字符串？
不用担心，我们都知道HTML语言的语法非常宽容。在编写HTML的过程中，无论我们写什么，浏览器都会正常显示，而且我们从未遇到过错误，例如“无效语法”。
这是因为浏览器会收到我们的错误代码，并且它可以修复无效的内容并继续工作。
例如，在html文件中写入此代码
非常明显的语法错误，缺少标签，嵌套标签，但浏览器中显示的结果就是这样
浏览器会自动添加和标签，关闭和标签。
由于HTML语法允许程序员犯错误，因此浏览器必须具有错误校正过程。这就是为什么有必要先翻译为令牌的原因。
同时，本节的代币部分非常适合下一个逐步分析，并为用户带来更好的体验。
接下来，浏览器将遍历所有令牌，并将内容分配给DOM，CSS或JS解析器，以便它们构建DOM树，CSSOM树或执行脚本。
该过程将将令牌分析到DOM节点对象中，将属性绑定到DOM节点，然后将其添加到DOM树中。
节点上的内部连接样式将调用CSS解析器进行分析更为特别，但是它不会参与构建CSSOM的过程，并且内部格式将作为属性保留在节点上。
浏览器通过令牌中的或标签获得CSS文件，然后通过CSS解析器分析文件以构建CSSOM树。
应该注意的是，CSS分析将仅通过获得完整的CSS文件才能开始分析。
由于CSS样式之间有相互的覆盖范围，因此很可能之前分析了许多内容，所有内容均由后来的样式覆盖。
众所周知，真正的CSSOM树不仅是我们编写的样式。浏览器本身还具有大量默认样式。
浏览器将DOM树和CSSOM树结合在一起，以生成视图中真正呈现的渲染树。
此过程主要是要过滤不需要在DOM树中渲染的节点，例如，等等，或将节点设置为样式。
根据渲染树，每个节点的屏幕上都应出现的所有坐标，然后将节点渲染到页面。
浏览器的优化非常关注此过程，但是本文主要讨论了第一个屏幕的加载。在这里不要讨论太多。
浏览器分析HTML是一个逐步过程。为了获得更好的用户体验，浏览器将努力尽快在屏幕上显示内容。
浏览器不必等到整个HTML文档解析完成，并且它将开始构建渲染树并设置布局。虽然不断接受和处理网络的其余部分，但浏览器将分析并显示一些内容。
因为对浏览器的分析是渐进的，所以我们希望用户可以在开始时看到的DOM元素处于最终位置，因此该标签将首先写在头上，首先构建CSSOM树，然后逐渐构建DOM构建Domtree。
浏览器分析了从上到下的HTML，并且生成的令牌标签也按照此顺序排列。
然后，浏览器遍历每个令牌以执行相应的解析器。
它与分析DOM，解析CSS和运行JS无关。该轮到谁的人都会分析谁。
但是用户看到的是DOM元素，因此程序员对DOM最重要，并且经常说CSS和JS阻止了DOM树的构造。
在JS中，可以更改当前DOM或CSSOM树的结构，然后必须获得最新状态。浏览器将停止JS的操作，修改DOM树或CSSOM树，并重新划出计算元素位置。因此，真正阻止的是JS。
现在让我们看一个例子以加深障碍的理解
控制台的输出就是这样
让我们分析过程
从上到下，分析了浏览器。当第一个标签时，执行JS，但是DOM树中没有元素。
然后遇到标签，生成CSSOM节点，然后添加到CSSOM树中。
再次遇到标签，生成DOM节点，然后将其添加到DOM树中。目前，它可以将其组合成渲染树并显示在页面上。
最后，我遇到了标签并执行了JS。目前，已经有要获得其宽度和输出的元素。
然后，该JS还创建了一个标签来插入节点（示例代码上方）。此时，HTML的结构已更改，它将为其生成令牌，分析CSS，更新最新的CSSOM树，RE - RE - -布局和渲染。
最终为输出提供JS的最新属性值。
如果我们介绍外部文件或标签，则浏览器将停止解析，并且将开始分析，直到下载外部文件。
这显然是浪费资源，因此有一个异步脚本，该脚本是通过将标签添加或属性来实现的。
在找出浏览器渲染页面的过程和原理后，这里提出了一些优化方法：
参考文档：浏览器的工作方式