一、相关概念

1）为什么要减少HTTP请求

性能黄金法则：只有10%-20%的最终用户响应时间花在接收请求的html文档上，剩下的80%-90%时间花在html文档所引用的所有组件（图片，sctipt，css，flash等等）进行的http请求上。

如何改善：改善响应时间最简单途径就是减少组件的数量，并由此减少http请求的数量。

HTTP链接产生的开销：域名解析–TCP链接–发送请求–等待–下载资源–解析时间

疑问：

DNS缓存：查找DNS缓存也需要时间，多个缓存就要查找多次，有可能缓存会被清除。

Keep-Alive：HTTP1.1协议规定请求只能串行发送，也就是说一百个请求必须依次租个发送，前面的一个请求完成才能开始下一个请求。

2）减少HTTP请求的方式

图片地图

图片地图允许你在一个图片上关联多个URL，目标URL的选择取决于用户点击了图片的那个位置。

<div>
  <img usemap='#map1' src='/images/test.gif'>
  <map name='map1'>
    <area shape='rect' coords='0,0,31,31'  href='http://www.baidu.com'>
  </map>
</div>

CSS Sprites

CSS Sprites中文翻译为CSS精灵,通过使用合并图片,通过指定css的background-image和background-position来显示元素.

性能影响

图片地图与CSS精灵的响应时间基本上相同,但比使用各自独立图片的方式要快50%以上。

合并脚本和样式表

使用外部的js和css文件引用的方式，因为这要比直接写在页面中更易于页面的css和js的修改与维护。

独立的一个js比多个js文件组成的页面载入要快38%。

图片使用Base64编码减少页面请求数

采用Base64的编码方式将图片直接嵌入到网页中，而不是从外部载入。

<img src=”data:image/gif;base64,/9j/4AAQSkZJ…”>

<?php
// 用php将图片转成base64编码
$img = 'test.jpg';
$base64_img = base64EncodeImage($img);
 
echo '<img src="' . $base64_img . '" />';
 
function base64EncodeImage ($image_file) {
 $base64_image = '';
 $image_info = getimagesize($image_file);
 $image_data = fread(fopen($image_file, 'r'), filesize($image_file));
 $base64_image = 'data:' . $image_info['mime'] . ';base64,' . chunk_split(base64_encode($image_data));
 return $base64_image;
}
?>