浏览器之前如何构建渲染树

问题描述 投票:1回答:1

我正在研究Web浏览器的工作原理。

我理解如下,

  • 一旦HTML资源到达,浏览器就会解析HTML并构建DOM树。
  • 当它遇到用于CSS导入的link元素时,它会停止构建DOM树并构建CSSOM树。
  • 构建CSSOM树之后,构建DOM树。
  • 组合后,渲染树得到建立。

但是因为DOM构造在遇到<script>时停止了,所以我们在<script>之前放置</body>以在JS加载之前完成构建渲染树。

但这不意味着</body>尚未进入DOM树吗?我看到的着作向我解释说,我们可以完成渲染而无需等待<script>正在做的事情。我认为如果这是真的,那么构建渲染树时不需要等待完整的DOM树而只需要等待CSSOM树。因为浏览器可以在解析</body>之前浏览。

或者它是否认识到唯一的左边元素是</body>而忽略它?

javascript dom browser rendering
1个回答
1
投票

你的理解有点过,但我会专注于关键点。

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

只要解析器遇到开始标记,就会创建该元素并将其添加到DOM中。如果解析停顿,则可以渲染到该点创建的整个DOM - 假设当时没有进行渲染阻塞抓取。

对于结束标记,它们主要用于标识元素的结束位置,以便标记中的下一个元素或文本不会添加为刚刚结束的元素的子元素。

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

© www.soinside.com 2019 - 2024. All rights reserved.