浏览器如何在标记位于DOM树中之前构建渲染树?

时间:2019-04-23 22:16:06

标签: javascript dom browser rendering

我正在研究网络浏览器的工作方式。

我理解如下,

  • HTML资源一到达,浏览器就会解析HTML并构建DOM树。
  • 遇到用于CSS导入的link元素时,它将停止构建DOM树和CSSOM树。
  • 构建CSSOM树后,将构建DOM树。
  • 将它们合并后,将生成渲染树。

但是,由于在遇到<script>时DOM构造停止了,因此我们将<script>放在</body>的前面,以在JS加载之前完成渲染树的构建。

但这不是意味着</body>尚未在DOM树中吗? 我看到的作品向我说明,我们可以完成渲染而无需等待<script>在做什么。我认为,如果是这样,则无需等待完整的DOM树,而仅等待CSSOM树即可构建渲染树。因为浏览器可以在解析</body>之前浏览。

还是认识到唯一剩下的元素是</body>而忽略它?

1 个答案:

答案 0 :(得分:1)

您的理解还有些不足,但我将重点介绍关键点。

首先,DOM不包含单独的开始和结束元素或标签。这对标记{<body>,</body>}创建了一个名为body的元素。同样,一对标签{<span>,</span>}创建了一个名为span的元素。

解析器一旦遇到开始标记,就会创建该元素并将其添加到DOM。如果解析停顿了,那么到那时为止创建的整个DOM都可以呈现-假设当时没有进行呈现阻止获取。

对于结束标记,它们通常仅用于标识元素的结束位置,从而不会将标记中的下一个元素或文本添加为​​刚刚结束的元素的子元素。

但是,</body>有点特殊。如果解析器在</body>标签之后遇到标签或文本,则解析器将通过将元素和文本作为body元素的子元素来“修复” DOM。这并不是说解析器会完全忽略</body>标签-如果注释节点紧跟</body>标签之后,它将被添加为html元素的子元素,而不是body元素。