• HTML字符编码解析是如何影响浏览器性能的

    浏览器编码的重要性
    服务器君一共花费 16.815 ms 进行了 2 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    HTML文档是作为带有字符编码信息的字节流序列在互联网中传送的。字符编码信息可以在随文档发送的HTTP响应头信息中指定,也可以在文档的 HTML标签中指定。浏览器根据字符编码信息将字节流转换为显示在浏览器上的字符。

    如果不知道如何构造一个页面的字符,浏览器自然也不能正确地渲染页面。绝大部分浏览器在开始执行任何JavaScript代码或者绘制页面之前都要缓冲一定数量的字节流,缓冲的同时它们也要查找相关的字符编码设定(一个值得注意的例外是IE6/7/8)。

    不同浏览器需要缓冲的字节流数量不同,另外如果找不到编码设定,各浏览器默认的编码也不同。但是不管哪一种浏览器,如果在已经缓冲了足够的字节流、开始渲染页面之后才发现指定的编码设定与其默认值不同,都会导致重新解析文档并重绘页面。如果编码的变化影响到了外部资源(例如css\js\media),浏览器甚至会重新对资源进行请求。

    为了避免这些延迟,对任何超过1k(精确地说是1024字节,这是我们测试过的所有浏览器的最大缓冲限制)的HTML文档,要尽早指定字符编码。

    一些建议

    1. 通过HTTP头信息或meta标签指定编码

    为HTML文档指定编码设定有几种方式:

    • 服务器端:通过web服务器的配置来指定编码参数,为所有text/html类型的文档指定带有正确编码信息的Content-Type头信息。例如Content-Type: text/html;charset=UTF-8。
    • 客户端:在HTML代码中包含http-equiv="content-type"的meta标签,并指定字符编码。

    如果可能的话,为你的web服务器做指定字符编码的HTTP头信息配置。某些浏览器(例如Firefox)在执行JavaScript之前会用(比其它浏览器)更短的延迟缓冲来检查头信息中是否指定字符编码。这意味着它们可以跳过对HTML标签的检查,缩短缓冲的字节数和延迟时间。

    2. 把meta标签放在head区域的最前面

    如果你不能对web服务器配置进行修改,又需要通过meta标签指定编码,要确保你用于指定编码的meta标签是文档中head标签的第一个子元素。浏览器会在文档的前1024字节中寻找字符编码参数,因此为了避免性能损耗,编码参数在文档头部越早出现越好(在IE6以下的版本中,特定情况下,如果该meta标签不是head的第一个子元素,则会被忽略。具体触发情况尚未进行仔细测试,初步估计是与web服务器配置的默认编码或浏览器默认编码有关)。

    3. 始终指定文档类型

    浏览器开始检查字符编码设定前,它们必须先检测将被处理的文档是什么类型。如果没有在头信息或meta标签中指定文档类型(content-type),浏览器就会通过很复杂的算法去“嗅探”文档的类型。这个过程会造成额外的延迟,而且还会带来安全漏洞。

    4. 务必指定正确的字符编码

    你在HTTP头信息或meta标签中指定的字符编码设置一定要和编辑HTML文档时的实际字符编码一致,这非常重要。

    另外,如果同时通过HTTP头信息和Meta标签两种方式指定了字符编码,它们一定要保持一致。否则浏览器发现两者相互矛盾,会造成页面渲染错误或者为了重绘页面而造成额外的延迟。有关这一点,你可以阅读HTML 4.01规范(英文)中的5.2节:字符编码(英文)。

    扩展阅读

    如果需要进一步了解content-type以及字符编码设定存在/缺少的不同情况下浏览器行为的细节,可以参阅以下资料(英文):

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [PHP程序设计] PHP中的Hash算法 3 个条目
  2. [计算机算法] TAOCP与算法 12 个条目
  3. [PHP程序设计] htaccess 设置技巧 6 个条目
  4. [JavaScript程序设计] jQuery与表单操作 2 个条目
  5. [运维管理] 防火墙原理与应用 5 个条目
  6. [运维管理] 路由器与交换机 4 个条目
  7. [数据库技术] MySQL常用自带函数 3 个条目
  8. [移动开发] Android加载器Loaders 5 个条目
  9. [数据结构] 散列表(哈希表) 13 个条目
  10. [计算机算法] 从双端队列引出的卡特兰数 3 个条目
  11. [Python程序设计] Django Web环境配置 2 个条目
  12. [Linux操作系统] 基本 Linux Shell 命令 2 个条目
窗口 -- [博客]