【问题标题】：How do browsers build a render tree before </body> tag is in the DOM tree?浏览器如何在 </body> 标签在 DOM 树中之前构建渲染树？
【发布时间】：2019-09-13 03:57:25
【问题描述】：
我正在研究网络浏览器的工作原理。
我的理解如下，
- 一旦 HTML 资源到达，浏览器就会解析 HTML 并构建 DOM 树。
- 当遇到
link元素进行CSS导入时，停止构建DOM树并构建CSSOM树。
- CSSOM 树建好后，DOM 树就建好了。
- 组合这些后，渲染树就构建好了。
但是由于遇到<script>时DOM构建停止，所以我们将<script>放在</body>之前，以便在JS加载之前完成构建Render树。
但这不是说</body> 还没有在DOM 树中吗？
我看到的文字向我解释了我们可以完成渲染，而无需等待<script> 正在做什么。我认为如果这是真的，渲染树的构建不需要等待完整的 DOM 树，而只需要 CSSOM 树。因为浏览器可以在</body>被解析之前浏览。
还是它识别出唯一的左边元素是</body> 并忽略它？
【问题讨论】：
标签：
javascript
dom
browser
rendering
【解决方案1】：
您的理解有点过分，但我会集中在重点上。
首先，DOM 不包含单独的开始和结束元素或标签。这对标签{<body>,</body>} 创建了一个名为body 的元素。类似地，{<span>,</span>} 这对标签创建了一个名为 span 的单个元素。
解析器一遇到开始标记，就会创建元素并将其添加到 DOM。如果解析停止，则可以渲染到该点创建的整个 DOM - 假设当时没有进行渲染阻塞获取。
至于结束标签，它们大多只是用于标识元素的结束位置，以便标记中的下一个元素或文本不会作为刚刚结束的元素的子元素添加。
不过，</body> 有点特殊。如果解析器在</body> 标签之后遇到标签或文本，解析器将通过将元素和文本作为body 元素的子元素来“修复”DOM。这并不是说解析器完全忽略了 </body> 标记 - 如果注释节点紧跟在 </body> 标记之后，它将被添加为 html 元素的子元素，而不是 body 元素。