【译】提高网站访问速度的34条军规（4-6）

这是雅虎上的一篇文章，最近正在研究提高网页响应速度和用户体验的方法，拿来翻译一下，加深理解。

原文：best practices for speeding up your web site

 

4 Gzip压缩组件(Gzip Components)

tag:server

前台工程师的决策能够显著的减少在网络上传输HTTP请求和响应花费的时间。确实，终端用户的带宽速度、Internet服务提供商和连接交换机的服务器这些因素都是开发小组所不能控制的。但还有一些其它因素会影响响应的时间，比如压缩文件，就会减少HTTP响应的大小从而减少响应的时间。

从HTTP/1.1开始，Web客户端就被设定为支持HTTP请求的头部中Accept-Encoding指定的压缩格式：
Accept-Encoding: gzip, deflate

当服务器检测到请求头部中的这一代吗，它就会使用客户端提供的方法列表中的一个来压缩响应内容。而服务器通过响应头部中的Content-Encoding来告知客户端它所使用的压缩方式：
Content-Encoding: gzip

Gzip是当前最常用也是最有效的压缩方式，GNU项目开发了这一方法并且符合RFC 1952标准。另外一种你可能见过的压缩格式是deflate，但它没有那么有效和常用。

使用gzip压缩通常会减少70%的响应大小。当前浏览器中大约90%的Internet通讯传输声明支持gzip。如果你使用Apache服务器，配置gzip的模块取决于服务器的版本：Apache 1.3 使用mod_gzip ，而Apache 2.x 使用mod_deflate。

浏览器和代理会有一些已知的问题，可能导致浏览器的预期内容和获得的实际压缩内容不匹配。幸运的是，这种情况随着旧浏览器的使用者减少而减少。Apache的模块可以通过自动添加适当的变化响应文件头来解决这些问题。

服务器会根据文件类型选择gzip压缩的内容，但一般情况下，服务器选择压缩的内容会过于局限。大部分网站会压缩它们的Html文档，而压缩脚本和样式表也是值得一做的，但很多网站并没有这样做，事实上，压缩在包括XML和JSON在内的任何文本响应都是值得的。图片和PDF文件不应该被gzip压缩，因为它们已经是被压缩了的文件，gzip它们不仅浪费CPU甚至还有增大文件大小的可能。

Gzip尽可能多的文件类型是减少页面大小从而提高用户体验的一个简单的方法。

 

5 把样式表放在前面(Put Stylesheets at the Top)

tag:css

在研究Yahoo！的性能时，我们发现把样式表挪到文档的头部可以让页面的加载显得更快。因为把样式表放在头部可以让页面逐步呈现。

关心网站性能的前台工程师通常希望页面能够逐步加载；即，我们希望浏览器能够把已经获得的内容尽快展现。这对于内容很多的页面以及网络连接较慢的用户尤为重要。给予用户视觉上的反馈（比如进度提示）的重要性，已经经过了很详尽的论证。而对于我们来说，Html页面本身就可以作为进度提示！当浏览器逐步加载页面时，头部、导航条、顶部的logo等等这些都可以作为对正在等待页面的用户的可视的反馈。而这会从整体上提高用户体验。

把样式表放在文档的最后，会导致包括IE在内的大部分浏览器不进行逐步呈现。浏览器为了避免当样式改变时重绘元素而中止呈现。用户会十分无聊的看到一个空白的页面。

Html规范明确规定样式表应该被包含在页面的HEAD中：“和A不同，LINK只能在文档的HEAD部位出现，但它可以出现多次。”空白的屏幕或者由于没有应用样式而引起的内容的闪现都不值得去尝试。最好的方法是遵循HTML规范，把样式表放在文档的HEAD部位。

 

6 把脚本放在最后(Put Scripts at the Bottom)

tag:javascript

脚本可能会堵塞并发的下载。HTTP/1.1规范建议浏览器在每个域名下只进行两个并发下载。如果你把图片放在多个域名下，可以实现多于两个的并发下载。当脚本被下载时，即使使用不同的域名。浏览器也不会进行任何其它的下载。

有些情况下把脚本放到底部并不太容易。比如，脚本使用了document.write 来添加部分页面中的内容，就不能放到页面中更后面的位置。还可能有作用域的问题。很多情况下，还有一些变通的方法。

通常的建议是使用延迟脚本。DEFER属性表明脚本不包含document.write，而且提示浏览器继续展现。不幸的是，Firefox不支持DEFER属性。IE中，脚本可以被延迟，但并不如你期望的那么久。如果一个脚本可以被延迟，那么它也可以被放在页面的底部。这会让你的页面加载的更快。

 

【译】提高网站访问速度的34条军规 7-10

【译】提高网站访问速度的34条军规 索引