码迷,mamicode.com
首页 > 其他好文 > 详细

最佳实践:head里面标签的顺序

时间:2018-04-26 21:06:55      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:获取   rac   内容   nts   syn   soft   除了   nal   忽略   

渲染页面时为了保证最佳效果和可靠性,你应该小心放置head里面的元素。首先,我来解释下最佳顺序,然后解释为什么。

最佳head顺序

<doctype> 
    <html> 
        <head> 
            <meta http-equiv content-type charset>  
            <meta http-equiv x-ua-compatible> 
            <base> 
            <title, favicon, comments, script blocks, etc>

为什么顺序很重要

为来理解head里元素重要,先理解浏览器怎么解析页面的以及每个元素在解析时的作用。

当欧兰奇开始解析一个页面,它首先读http response body里面的内容。如果response里面的content-Type heade 指定里charset属性,这些body内容立即用指定的字符编码解析成文本。然而,如果charset没有定义,浏览器必须开始浏览response body里面的字节,同时在顶部确定一个unicode 字节顺序标记或者查找一个指定里字符集的meta http-equiv元素。当这些声明获取里,解析器需要重启,为里保证预先被读的字节是正确的。当重启时,F12开发者工具会显示如下:

技术分享图片

这个重启会影响展现,我们现在来解释。

如果一个字符集声明没有找到,浏览器会强制自动识别,所以就造成来开发者的目的和浏览器的解析不一致的现象。这种不一致会导致一个乱码的页面。所以通过http response指定字符编码很重要。如果你处于某种原因只能通过meta来指定字符集,meta是head里的第一个元素至关重要。

IE8及以后的版本允许页面开发者指定用于渲染页面的文档模式,为了能是网站用建议的ie版本来渲染。因为文档模式会影响浏览器如何解析页面,IE会重新解析页面如果找到指定X-UA-Compatible值的meta元素。F12开发者当需要重启是会给出提示:

技术分享图片

因为这个原因,所以设置X-UA-Compatible的最佳实践是放在http response header里。如果你必须在meta标签里指定,这个元素必须在所有的script blocks前面,并且应该尽可能的在前面。在一些例子里,X-UA-Compatible meta标签会被忽略(可能因为文档模式已经在之前被解析里)。当发生这个事情时,F12开发者工具会给出一下信息:

技术分享图片

基础元素控制了一些相对路径怎么被引用成绝对路径的。通常,相对路径结合了当前页面的路径。然而,当一个基础标签出现时,指定的href用于路径整合,页面的路径没有用到。因为基础元素影响了所有的相对路径的整合,它应该在任何一个相对路径出现前出现。对于IE7,基础元素必须在head里,如果在body里会被忽略。通过document.write的方式指定一个base元素,这种做法时不鼓励的。

当你指定了charset,X-UA-Compatible,base ,接着就是title。

预解析的理解

为了减少js,css,img,其它资源的加载时间,IE需要尽可能的在加载页面时下载这些资源。当浏览器遇到一个non-async/non-defer script 元素浏览器解析会暂停,为了按顺序执行script。这种暂停会导致解析其它元素时延时。

为了缓解这种现象,当主解析器被暂停时,IE开启了第二个解析器主要负责寻找需要下载的资源。这种模式被称为超前的预解析,因为它看起来在主解析器之前。这种被超前触发的下载请求被成为speculative,因为这是可能的主解析器执行的script可能会改变最终的标签,从而造成了speculative请求的浪费。

当解析器强制解析文档模式或者charset,IE终止页面上所有的请求并且开始重新解析,再一次查找需要下载的资源。除了CPU的耗费,还有网络流浪。

例如,假设一个页面从IE9标准模式切换到极速模式。F12会显示重启:

技术分享图片

你也会看到speculative 请求被终止。

技术分享图片

因为这些请求开始的很早。

翻译原文:https://blogs.msdn.microsoft.com/ieinternals/2011/07/18/best-practice-get-your-head-in-order/

最佳实践:head里面标签的顺序

标签:获取   rac   内容   nts   syn   soft   除了   nal   忽略   

原文地址:https://www.cnblogs.com/tianmuxi/p/8954553.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!