文章目录
一、为什么要减少HTTP请求？
1、性能黄金法则
只有 10% ~ 20%的最终用户响应时间花在接收请求的HTML文档上，剩下的 80%~90%时间花在HTML文档所引用的所有组件（图片，script，CSS，flash等等）进行的HTTP请求上。
2、如何改善（即减少组件花费的响应时间）？
改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量；
HTTP连接产生的开销
域名解析——TCP连接——发送请求——等待——下载资源——解析时间
疑问？
DNS缓存：本身DNS解析是有DNS缓存的。
Keep-Alive：本身HTTP1.1版本默认是通过 Keep-Alive 方式进行操作的，在此过程中，不会去花费TCP握手的时间，但是本身在此过程中，我们的HTTP是串行请求的，它还是会浪费一定的时间。
打破谣言
- 查找DNS缓存也需要时间，多个缓存就要查找多次有可能缓存会被清除；
- HTTP1.1协议规定请求只能串行发送，也就是说一百个请求必须依次逐个发送，前面的一个请求完成才能开始下个请求（即会造成响应时间的影响）。
二、减少HTTP请求的方式
1、图片地图
- 图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪个位置；
- 我们可以通过使用五个分开的图片，然后每个图片对应一个超链接，产生了5个HTTP请求，我们的目标是要减少HTTP请求；
- 将五个图片合并为一张图片，然后以位置信息定位超链接；
- 把HTTP请求减少为一个，可以保证设计的完整性和功能的齐全性。
例子：使用 <map><area></area></map> 标签
① 未使用图像地图的例子：
http://stevesouders.com/hpws/imagemap-no.php
② 使用了图像地图的例子：
http://stevesouders.com/hpws/imagemap.php
使用以上的网址进行请求，打开开发者工具来查看
<map><area></area></map>中的属性，看看是否是用了 图片地图 的形式 ，同时刷新网页对比一下，使用了 图片地图 和 未使用图片地图，在速度上，是否有明显的区别。
2、CSS Sprites（CSS精灵）
CSS Sprites 中文翻译为CSS精灵，通过使用合并图片，通过指定css的 backgroun-image 和 background-position 来显示元素。
background-position属性
background-position：x y；x 和 y 可以写负值也可以写正值，我们可以想象图片的左上方为（0,0），以（0,0）坐标向右是为负数的 x 轴，以（0,0）坐标向下是为负数的 y 轴。
例子：
将四个图标拼在一起，这样做是为了减少HTTP请求，如果是分开的四个图标，我们需要对四个图标分别做超链接，所有在这儿我们将它们合起来。合起来之后，不使用 imagemap 了，用 css精灵。使用如下：
① 做一个坐标轴，上下为Y轴，左右为X轴；
② 假设我们要去拿左边第一个图标（宽：18px； 高：18px），坐标为（0，0)，宽和高都为 18px；
background-position:0 0;
width: 18px;
height: 18px;
③ 如果我们去做一个 hover，当鼠标点击移到左边第一个图标上的时候，让其变为灰色，此时，坐标为：（0, -18），宽和高都为 18px；
background-position: 0 -18;
width: 18px;
height: 18px;
④ 如果我们给右边的第一个图标做 hover，坐标为（18, 0），宽和高都为 18px；
background-position:18 0;
width: 18px;
height: 18px;
使用CSS精灵的案例：
http://stevesouders.com/hpws/sprites.php
访问该网址，然后打开 开发者工具 去查看 <span> 标签中的CSS中的 background-position属性。
性能影响：图片地图与CSS精灵的响应时间基本上相同，但比使用各自独立图片的方式要快 50% 以上。
3、合并脚本和样式表
- 使用外部的 js 和 css 文件引用的方式，因为这要比直接写在页面中性能要更好一点（这样会增加HTTP请求）；
- 独立的一个 js 比用多个 js 文件组成的页面载入要快 38%（即把多个js 文件合并为一个 js 文件）；
- 把多个脚本合并为一个脚本，把多个样式表合并为一个样式表；
例子：
① 独立的 js 文件
http://stevesouders.com/hpws/combo-none.php
② 合并在一起的 js 文件
http://stevesouders.com/hpws/combo.php
分别访问以上的网址，打开 -> 开发者工具 -> Network，刷新页面，查看 js 加载使用的时间。
4、图片使用 Base64 编码减少页面请求数
采用 Base64 的编码方式将图片直接嵌入到网页中，而不是从外部载入；
<img src="data:image/gif;base64,/9j/4AAQSkZJ......">
举例1：
访问以下的网址，打开 开发者工具 中的 network 查看加载的时间，这样的方式可以减少HTTP请求，但是下载HTML文档的时间就会增长。
http://stevesouders.com/hpws/inline-images.php
运行结果：
举例2：在css中做背景图的时候使用base64编码
访问以下的网址，并打开 开发者工具 中的 Elements 查看 background-image 属性值是否为 base64编码格式 的写法。
http://stevesouders.com/hpws/inline-css-images.php
运行结果：
注：我们不需要把这个编码读出来，没有什么意义。我们可以通过 PHP的 file_get_contents 将图片读出来，读出来之后，我们通过一个函数 base64_encode对其进行编码，将得到的字符串写入进去即可。