西红柿爱番茄

关于页面charset会影响浏览器加载和渲染性能的了解，以前一直都没怎么关注，今天在Google code上了解到了这一点：在HTML文档的头部使用meta标签显式声明页面的charset将会使得浏览器更快的加载、渲染页面和执行页面内的scripts等等组件。

现在先来了解一下浏览器是如何接收HTML文档的数据和进行重新编码的：从服务器传输到浏览器的HTML文档内容是以一系列的字节来传输的，并且连同字符编码信息一起传输。在HTTP响应头中详细指定字符编码信息，或者在HTML文档的meta标签中明确的指定，浏览器就会使用这个指定好的字符编码信息去转换从服务器端传输过来的字节流，并且渲染到浏览器窗口中显示出来。如果浏览器不知道这个字符编码信息，就不会正确的渲染页面，大多数浏览器在执行任何的Javascript和渲染页面之前会缓冲了一定数量的字节，同时浏览器还会去查找字符编码信息来处理这些缓冲的字节。

如果没有明确的指定字符编码信息，不同的浏览器对缓冲的字节数和默认的字符编码信息都是不同的。因此，一旦他们缓存了许多必须的字节而又开始渲染页面，之后浏览器查找到了页面指定的字符编码信息跟浏览器默认的不同的时候，浏览器就会按照在页面中查询到的字符编码信息重新渲染页面，有时甚至会重新请求页面内的资源。

因此，为了避免上面将会出现的延时或者不必要的操作，就需要在HTML页面中明确的指定charset的类型，并且在head中是越前越好（比如直接在head标签之后，这一点主要是针对Firefox3.5，Firefox3.5如果在页面的前2048 bytes中没有查找到字符编码信息，就会使用默认的字符编码信息来编码字节和渲染页面）。因此，Google code对于charset提出了四点建议：

1. Prefer HTTP over meta tag parameters。意思大概是在HTTP响应头中和在meta标签中同时声明charset信息。比如： <meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>
2. 尽早声明charset，“Near the top”。推荐是直接在head标签之后就声明。
3. 始终指定的内容类型。在浏览器开始查找字符编码信息之前，它必须首先要确定被处理的文档内容的类型。如果这个没有在HTTP头或者HTML的meta标签里指定，浏览器就会使用算法尝试去“猜测”这个类型。这个处理操作就会造成额外的延迟。所以，为了双方面的性能考虑，需要给所有的资源都总是指定内容类型，而不仅仅是文档（比如HTML文档的类型是text/html）。
4. 确定使用了正确的字符编码。在HTTP头和Meta标签中声明的charset信息一定要相同，这点非常重要。否则会使得浏览器不能正确的渲染页面或者在渲染页面之前造成额外的延迟。

对于上面Google code提出的四点建议，我想再提一点的就是：对于Javascript、css等等在这些资源的响应头中最好也声明和HTML页面相同的字符编码信息，来统一浏览器处理字节编码。

对于没有明确指定charset信息的HTML页面，浏览器在使用默认的charset来渲染页面之前，会缓冲一定数量的字节数，这篇文章中对这个缓冲字节数做了更详细的测试：《Performance Implications of “charset”》。还有更多关于charset的优化信息，可以参考：《Browser Performance Issues with Charsets》，《Specify a character set early》。

更多关于优化的叙述，可以浏览：《优化试试玩》，《尝试Gzip压缩》