html - 为什么 标签之后的代码被移到 之前？有性能提升吗？

Question

阅读其他 Stack Overflow 帖子，例如 this SO question带我到this odd Google recommendation关于 CSS 优化。 “奇怪”是他们延迟 CSS 加载的建议，结果是这样的:

        <div class="blue">Hello, world!</div>
    </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

除了看起来过多、令人困惑、具有无效的 HTML 以及声明“CSS 规则的应用顺序是通过 javascript 维护的”之外。即使没有显示 javascript...我的问题是:

在测试他们的示例并检查结果时，在 </html> 之后出现的所有代码移至 </body> 之前. 所以我的问题是……为什么？

1. 为什么要移动它？似乎所有主流浏览器都试图考虑 </html> 之后的代码通过将其移动到 </body> 之前.我搜索了一下，找不到任何关于此的文档/标准。

2. 为什么 Google 甚至会推荐这个？就像这样，这样做有什么实际的好处吗？因为我想把它放在 </body> 之前一开始就足够了。 (关于 BoltClock 的良好主观解释，是否有任何确凿的证据表明实际上有性能提升？)

这发生在 IE11、Firefox 26、Chrome 32.x 和 Windows Safari 5.1.7 中。检查的 HTML 是:

        <div class="blue">Hello, world!</div>
        <noscript><link rel="stylesheet" href="small.css"></noscript>
    </body>
</html>

在 </html> 之后添加更多代码有相同的结果。

这让我想起了其他奇怪的错误纠正，比如浏览器将如何呈现 <image>标记为 <img> ( ref )...

更新:为了测试，我设置了 this URL for NOT deferred CSS还有this URL for deferred CSS (好吧，我希望那篇文章是什么意思)......

Answer 1

现在很奇怪。您不允许在</html> 之后有任何 元素结束标记因为 html是 HTML 文档的根元素。

1. 但这是 HTML，不是 XHTML。浏览器不会完全失败(就像使用 XHTML 那样)，而是将出现在文档末尾的任何内容(注释和我相信空白除外)并将其移动到文档正文的末尾并假装一切正常。

   在 HTML5 之前，在这种情况下没有错误处理标准，仅仅是因为在根元素之后有任何元素都是无效的。在 HTML5 中，几乎所有的错误处理都在 section 8.2.5 中进行了说明。 .特别是，它声明在“after body”或“after after body”插入模式中，如果存在非 DOCTYPE、注释或 </html> 的意外标记结束标记，那么解析器应该将插入模式切换到“in body”来处理 token ，这意味着无论遇到什么，都应该插入到 body 中。正如插入模式名称所暗示的那样，这意味着内容被添加到正文的末尾。

2. 对于 Google 为什么会推荐它，我没有客观的答案，但我相信 Google 将性能置于标准合规性之上，尤其是在已知无效标记不会导致严重问题的情况下。他们是那样的冒险者(另请参阅:Google Chrome)，但我离题了。

   你提到把 noscript和 link </body> 之前的元素结束标记，如您所见，无论如何根据浏览器和 HTML5 规范最终会发生这种情况。但是请记住，拥有 link 实际上是无效的noscript 中的元素首先在页眉之外的任何位置添加元素。但同样，这可能是性能超过标准合规性的情况。