《高性能网站建设指南》阅读笔记_规则1

本文链接：https://blog.csdn.net/llkaximoduo/article/details/8523966

本文部分内容参考网络内容，为了实验的需要，没有隐去用来实验的网站名，文中观点仅用于个人备忘或者学习探讨，特此声明。

序言：

可能很多人跟我一样，一直以为性能主要是后端问题。但是这本书中的实例表明，前端问题可能消耗掉整体时间的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

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

我们做到了：

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

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

规则1－减少HTTP请求

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

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

</map>

使用：http://stevesouders.com/hpws/imagemap-no.php

未使用：http://stevesouders.com/hpws/imagemap.php

CSS Sprites

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

CSS Sprites方式处理例子：

<style>

.home{background-position:00;margin-right:4px;margin-lift:4px;}

</style>

书中的示例：

http://stevesouders.com/examples/sprites.php

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

例如：<img src="data: image/gif; base64,FNMSDAAAAA......"

http://stevesouders.com/hpws/inline-images.php

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

单独脚本：http://stevesouders.com/hpws/combo-none.php

联合脚本：http://stevesouders.com/hpws/combo.php

把原有的多个样式表文件合成一个，可以使用户在浏览网页时只需下载一个CSS文件。这样减少了HTTP请求，速度自然就快了些。Javascript文件也一样。不过这样做似乎不符合模块化的开发原则。本书作者提出的建议是：开发时仍用多个文件，部署时再把它们合并在一起。

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