HICK 者，乡巴佬也

前言

一想到优化网站，大多数情况下我们都是优化动态的后台程序，比如程序执行效率，查询数据库效率等。一些大规模的站点，比如 www.yahoo.com 等，页面的载入已经是超越了动态程序生成页面的消耗。虽然书中说 10-20% 的时间损耗在服务器端程序生成 html ，其他的损耗在浏览器和服务器的交互以及页面渲染。但是我看来，很多时候还是需要根据网站的规模和表现来评估实际损耗，给出这样的数据并不一定适应所有，甚至是大部分网站。当然，基本上是网站规模(主要是说页面内容量)越大，后台生成 html 的损耗越小——实际上大型站点的很多页面都是完全或者部分静态化的。

这方面的优化，很重要的一方面是了解常见浏览器跟服务器的交互以及解释 html 的方式。开头有提到 Parallel Downloads ，这个解释了浏览器拉取页面组件的一些方式，后面会讲述，比较有价值。还提了一条说，大多数浏览器在请求脚本的时候，会阻塞其他请求，无法并行其他请求。对很多大型站点来说，前台优化的代码，在很多情况下确实要比后台优化来得简单，快速。

http 协议概要

因为它定义了浏览器和服务器的交互方式，了解 http 协议，才能够更好的进行优化，下面主要抽取一些优化比较相关的包头简单介绍：

压缩
浏览器请求头中 Accept-Encoding: gzip,deflate 是告诉服务器它支持的压缩类型。需要注意的是，在服务器回包的时候，apache2.0 的 deflate 也会标记为 gzip 压缩。

条件请求
浏览器并不会把每个请求都发送给服务器，经常会有某些文件已经被浏览器保存起来，这时候浏览器判断被 cache 的文件信息，并把相关信息发送给跟服务器。比如一般浏览器对 cache 文件会发送 If-Modified-Since 表示被 Cache 文件的创建时间，如果服务器发现该文件自该创建以后没有被修改，就直接发给 http 包头告诉浏览器可以读 Cache 即可，这样就节省了传输的时间和服务器消耗。这时候，服务器一般都是返回经典的状态码 304 Not Modified 。

Expires
这个时间指定文件的过期时间，如果浏览器 Cache 了该文件，在没有过期的情况下，根本就不需要跟服务器发送请求。

Keep-Alive
HTTP 协议是建立在 TCP 协议基础上，早期的 HTTP 实现中，每个请求都需要创建一个 socket 连接，这样的话，一个页面通常要与服务器创建很多 socket 连接才能够下载到页面显示需要的组件，这个是很不合理的，socket 连接可能很容易被耗尽。HTTP 1.0 开始允许浏览器跟服务器建立持久连接，也就是所谓的 Keep-Alive ，使得一个连接中能够完成多个请求。这个在浏览器发包和服务器发包中都定义。当一方发包说 Connection: close 时，就会终止该连接。技术上说， HTTP 1.1 不是必须声明的，但是大多数浏览器和服务器还会发送它。HTTP 1.1 里有个叫 Pipelining 的东西，允许浏览器非阻塞(异步)的发送请求。性能应该比持久连接要好，但是 IE 到 IE7 还不支持该功能，Firefox 2 则是默认关闭该功能。因为建立 https 连接更复杂，所以这时候 Keep-Alive 尤其重要。

更好的学习 HTTP 协议可以参考 RFC 文档 http://www.w3.org/Protocols/rfc2616/rfc2616.html 或者 HTTP: The Definitive Guide by David Gourley and Brian Totty (O’Reilly; http://www.oreilly.com/catalog/httptdg) 一书。

尽可能减少 http 请求

有时候就是设计出了那么多界面表现，这里把设计因素排除在外。

Image maps
实际上这是和早前类似 photoshop 图片切片的应用。通过对一个图片做 map, 可以在一个图片上定义出多个链接。跟使用图片切片相比，这里只有一个图片的 http 请求。当然，这是一种比较笨拙的方法，作者首先就提这个，不是很认同。甚至说，这章除了下面这节以外，其他得都显得很牵强。

CSS Sprites
CSS Sprites 有必要好好的学习一下。不过说到原理也很简单，主要就是通过 CSS 中的 background-image background-position 和 width, height 来显示图片的指定范围来渲染某块页面。这样，我们可以用一张经过合并的大图，表现出很多块显示。

inlines images
可操作性太差了，IE7 都不支持，所以完全没有必要去操作，知道有这会事当然也不会差。

合并 CSS 和脚本文件
注意不是说把 CSS 文件和脚本文件合并到一起，意思就是尽量在一个页面中只使用一个 css 文件，一个脚本文件，减少 http 请求。