为什么代码放在< / html>标签已移至< / body&gt ;?是否有性能增益? [英] Why does code after </html> tag get moved to before </body>? Is there a performance gain?

查看:100
本文介绍了为什么代码放在< / html>标签已移至< / body&gt ;?是否有性能增益?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

阅读其他Stack Overflow文章(例如这个SO问题)以这种奇怪的Google建议来优化CSS。 Odd是他们推迟CSS加载的推荐,如下所示:

 < div class =blue世界!< / div> 
< / body>
< / html>
< noscript>< link rel =stylesheethref =small.css>< / noscript>

除了看起来过多,混乱,含有无效的HTML,并说CSS规则的应用顺序是维护...通过javascript。即使没有javascript显示...我的问题是这样:



在测试他们的例子并检查结果时, code>< / 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 =stylesheethref =small.css>< / noscript>
< / body>
< / html>

< / html> 有相同的结果。



这让我想起了其他奇怪的错误纠正,例如浏览器如何将< image> code>< img> ( ref < a>)...



UPDATE:
对于测试,我设置
NOT deferred CSS的此网址以及

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


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

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


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



    你提到把 noscript 链接元素,正如你所看到的那样,在< / body> 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.

这篇关于为什么代码放在&lt; / html&gt;标签已移至&lt; / body&gt ;?是否有性能增益?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆