且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

为什么代码放在< / html>标签已移至< / body> ;?是否有性能增益?

更新时间:2022-11-30 11:32:24

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


  1. XHTML。而不是失败的直接(如同它与XHTML),浏览器只是采取任何出现在文档的结尾(除了评论和我相信空白),并将其移动到文档正文的结尾,并假装一切都很好。 / p>

    在HTML5之前,在这种情况下没有标准的错误处理,只是因为在根元素之后有任何元素是无效的。在HTML5中,几乎所有的错误处理都在第8.2.5节中说明。特别是,它声明,在 after body after after body 插入模式后,如果存在意外的令牌即不是DOCTYPE,注释或< / html> 结束标记,则解析器应将插入模式切换到正文以处理令牌,无论遇到什么,都应该插入身体。


  2. 我没有客观的答案,为什么Google会将内容添加到正文的末尾。推荐它,但我相信Google的优先级的性能超过标准合规性,特别是在无效标记已知不会导致严重问题的情况下。



    你提到把 noscript $ c结束标签之前的和链接元素,正如你所看到的那样,在< / body> 什么最终发生根据浏览器和HTML5规范反正。但请记住,在页头之外的任何位置的 noscript 元素中有一个链接首先。但同样,这可能是标准合规性的一种情况。



Reading other Stack Overflow posts like this SO question lead me to this odd Google recommendation on CSS optimization. "Odd" being their recommendation for deferring CSS loading ended like this:

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

Aside from seeming excessive, confusing, having invalid HTML, and stating "The application order of CSS rules is maintained... through javascript." even though there is no javascript shown... my question is this:

When testing their example and inspecting the result, all the code that occurs after the </html> is moved to just before </body>. So my question is... WHY?

  1. Why was it moved? It seems like all major browsers try to account for code after </html> by moving it to before </body>. I searched for a bit and couldn't find any docs/standards on this.

  2. Why would Google even recommend this? As in, is there any actual practical benefit to doing this? Because I would think putting it before the </body> to begin with would suffice. (and regarding BoltClock's good subjective explanation, is there any hard evidence that there is in fact a performance gain?)

This occurred in IE11, Firefox 26, Chrome 32.x, and Windows Safari 5.1.7. Inspected HTML was:

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

Adding more code after the </html> had the same result.

This reminds me of other odd error-correcting, like how browsers will render <image> tags as <img> (ref)...

UPDATE: For testing, I setup this URL for NOT deferred CSS and also this URL for deferred CSS (well, what I expect that article meant)...

Now that is odd. You aren't allowed to have any elements after the </html> end tag because html is the root element of an HTML document.

  1. But this is HTML, not XHTML. Instead of failing outright (as it would with XHTML), the browser just takes whatever appears at the end of a document (other than comments and I believe whitespace) and moves it to the end of the document body and pretends everything is fine.

    Prior to HTML5, there were no standards for error handling in such cases simply because it's not valid to have any elements after the root element. In HTML5, virtually all error handling is accounted for in section 8.2.5. In particular, it states that in the "after body" or "after after body" insertion modes, if there's an unexpected token that isn't a DOCTYPE, comment or </html> end tag, then the parser should switch the insertion mode to "in body" to process the token, which means whatever is encountered there should be inserted into the body instead. As implied by the names of insertion modes, this means the content gets added to the end of the body.

  2. I have no objective answer as to why Google would recommend it, but I do believe Google prioritizes performance over standards compliance, especially in cases where invalid markup is known not to cause serious issues. They're risk-takers like that (see also: Google Chrome), but I digress.

    You mention putting the noscript and link elements just before the </body> end tag, which as you've seen is what ends up happening according to browsers and the HTML5 spec anyway. Keep in mind however that it's not actually valid to have a link element in a noscript element anywhere outside of the page head in the first place. But again, this is probably a case of performance over standards compliance.