序言：

可能很多人跟我们一样，一直以为性能主要是后端问题。但是这本书中的实例表明，前端问题可能消耗掉整体时间的80%到90%，而只有10%到20%的时间花在了下载HTML文档上。一般我们认为前端性能无非就是坚持使用外部的CSS和JS，尽量减少CSS和JS引用的数量，还有对JS的压缩。但是这本书告诉我们，我们要做的工作远不止这些。

本书按照优先级顺序介绍了14个性能规则。但是并非每个规则都要应用于每个网站，也不是每个网站都应该按照同一种方式运用一个规则，但是每个规则都值得考虑。

我们自己做了下实验：

百度：0.013/0.075=17%     0.014/0.040=35%

page speed 评分：99

淘车买车首页：0.699/7.559=9%       0.667/2.978=22%  

page speed 评分：68

淘车网车源列表页：0.057/4.734=1.2%     0.055/2.112=2.6%    

page speed 评分：84

二手车之家车源列表页：0.068/2.164=3%       0.063/1.183=5%   

page speed 评分：82

我们的问题大概在一下这几个方面：

启用 Keep-Alive

由同一网址提供资源

将图片组合为 CSS贴图定位

优化图片

我们做到了：

暂缓 JavaScript解析

压缩 JavaScript

压缩 CSS

压缩 HTML

指定图片大小

将查询字符串从静态资源中删除

优化样式表和脚本的排列顺序

使用浏览器缓存

使目标网页重定向可缓存

内嵌小型 CSS

内嵌小型 JavaScript

启用压缩

将 CSS放在文档标头处

将图片组合为 CSS贴图定位

尽量减少请求的数据量

尽量减少重定向

指定字符集

请指定一个“Vary: Accept-Encoding”标头

请指定缓存验证工具

避免出现错误的请求

避免在 CSS中使用 @import

首选异步资源

下面是对以上提到的14条规则的具体介绍：

规则1－减少HTTP请求

既然有80％－90％的时间花在为HTML文档所引用的所有组建（图片，脚本，样式表，Flash等）进行的HTTP请求上，因此改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求数量。这是最重要的原则，如果14条规则里只能选一条，那就是它了.

图片地图：如果用图片做导航链接，我们们可以将多个图片完成的功能，使用一个图片，根据的不同区域来响应不应的请求。因为一个图片只有一次HTTP请求，而多个图片需要有多次请求。

CSS Sprites

原理同上，但比上面的更灵活

CSS Sprites方式处理例子：

书中的示例：

 

内联图片 是将简单图片的编码数据直接保存在URL自身之中。（需要内联编码技术）

合并脚本和样式表：每个文件都会导致一个HTP请求，尽量将css和js合并到一个文件中；

把原有的多个样式表文件合成一个，可以使用户在浏览网页时只需下载一个CSS文件。这样减少了HTTP请求，速度自然就快了些。Javascript文件也一样。不过这样做似乎不符合模块化的开发原则。

小结：前三种方法的起到的效果差不多，根据书中提供的例子，理论上都能节约将近一半的时间。但是图片地图中的图片必须是连续的，在定义区域坐标时，如果采取手工的方式则很难而且容易出错，而且除了举行之外几乎无法完成其它形状，通过DHTML创建的图片地图IE不支持。CSS精灵没有图片连续的限制，非常灵活，而且它还有个额外的优点，合并后的图片会比分离的图片的总和要小。这是因为它降低了图片自身的开销（颜色表，格式信息等）。内联图片的缺点是IE不支持，而且对图片的大小也有限制。所以CSS精灵是优质选择，我们要求合并脚本和样式表，要求不超过三个，包括头部一个，框架一个，页面里只能用一个了。