[译]对《优化浏览器渲染》的补充

ISD Webteam的大布同学(twitter:@tc_bryanzhang)在2010年1月翻译了google Page Speed系列中的Optimize browser rendering,很是方便了大家。在此基础上,google又有了更新,我且在此把google新增的部分翻译一下,作为对大布同学译稿的补充。

google这篇文章关注的是资源被下载到客户端以后,在浏览器加载、解释、渲染HTML、CSS和JavaScript阶段的性能优化,提出了5个要点:

  1. 使用高效率的CSS选择器
  2. 避免CSS expressions
  3. 将样式表放在页面顶部
  4. 指定图像尺寸
  5. 尽早指定文档的字符编码

前四点大布同学已经翻译过了,没拜读过的同学可以点击上面的链接到涛哥的博客学习,第五点的翻译如下:

概述

为HTML文档尽早指定字符编码,可以让浏览器立刻开始执行脚本。

细节

HTML文档是作为带有字符编码信息的字节流序列在互联网中传送的。字符编码信息可以在随文档发送的HTTP响应头信息中指定,也可以在文档的HTML标签中指定。浏览器根据字符编码信息将字节流转换为显示在浏览器上的字符。如果不知道如何构造一个页面的字符,浏览器自然也不能正确地渲染页面。绝大部分浏览器在开始执行任何JavaScript代码或者绘制页面之前都要缓冲一定数量的字节流,缓冲的同时它们也要查找相关的字符编码设定(一个值得注意的例外是IE6/7/8)。

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

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

建议

通过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标签的检查,缩短缓冲的字节数和延迟时间。

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

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

始终指定文档类型

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

务必指定正确的字符编码

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

扩展阅读

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java相关

非常全面的vim配置文件

21630
来自专栏哲学驱动设计

OEA中的AutoUI重构(1) - Command自动生成

    OEA框架的核心之一是AutoUI,其职责是面向领域模型及UI元模型进行生成统一的界面。     在本次的迭代开发中,需要对命令按钮的生成方式进行一些定...

21180
来自专栏小狼的世界

VIM的常用操作

作为Linux开发的必不可少的工具,能够将Vi的功效发挥到极致,必然能够提高我们的工作效率,下面是一些Vi的使用技巧。

14630
来自专栏王二麻子IT技术交流园地

八、VueJs 填坑日记之参数传递及内容页面的开发

我们在上一篇博文中,渲染出来了一个列表,并在列表中使用了router-link标签,标签内的:to就是链接地址,昨天咱们是<router-link :to="'...

24470
来自专栏Aloys的开发之路

Eclipse相关问题

MANIFEST.MF文件 在Eclipse的.classpath和runableX.jar中的MANIFEST.MF文件中都指定了可依赖jar包的顺序,所以只...

32060
来自专栏守望轩

Visual Studio 2008 每日提示(十一)

#101、块缩进和智能缩进的差异 原文链接:what’s the difference between smart indenting and block i...

30330
来自专栏程序员互动联盟

【答疑释惑】Android多国语言实现原理

先来看一下网友的问题: ? 网友们问的问题是android中布局文件中android:text="hello_world"和 android:text="@s...

331100
来自专栏计算机编程

Vue 单文件组件详解<1>--简单上手

vue 的webpack的结构非常简单,简单的一眼就可以知道每个目录下是干啥的,在components目录下就有属于我们想要详细解析的内容,这两个vue文件即为...

11110
来自专栏程序你好

如何用7个简单的步骤,在Firefox开发工具中调试JavaScript

本文将着重于在Firefox的开发工具中调试JavaScript代码。Firefox中的开发工具是一个非常强大的工具,可以加速您的bug查找和修复过程!

12760
来自专栏微信终端开发团队的专栏

XCode基本使用及调试技巧

对于初学iOS开发的同学,了解了Objective-C的基本使用后,最关心的应该是如何把OC程序运行起来。由于Xcode的基本使用比较简单,所以本文着重介绍一些...

72370

扫码关注云+社区

领取腾讯云代金券