减少HTTP请求次数

为什么：

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

如何改善呢？改善相应时间最简单的途径就是减少组价的数量，并由此减少HTTP请求的数量。

HTTP连接产生的开销：

几个步骤

域名解析—TCP连接—发送请求—等待—下载资源—解析时间

中间有个等待和下载资源，这些都比较消耗时间的，所以我们为了解决http产生的开销，尽量让他稍有http连接。

1.      问：DNS解析有DNS缓存，我们已经把解析过的已经缓存过了？还浪费啥时间

答：虽然DNS缓存有，但是我们查找DNS缓存也需要一定的时间，多个缓存就要查找多次，有可能缓存会被清除

2. 问：HTTP1.1默认是Keep-Alive方式来进行操作的，我们不会花费TCP握手的时间了

答：我们HTTP本身是串行请求，100个请求必须一次逐个发送，前面的请求玩了才能完成下一个请求，造成相应时间的影响

减少HTTP请求的方式：

1 图片地图

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

         我们可以通过使用多个分开的图片，然后每个图片都对应一个超链接，当然这也会产生很多HTTP请求，我们目标是减少HTTP请求。

将多个图片合并成一个图片，然后以位置信息定位超链接

把HTTP信息减少成为一个,可以保证设计的完整性和功能的齐全性

使用<map><area></area></map>标签

用 usemap=”#map1” border = 0在image标签里

<map name=”map1”>

在map里声明area <area shape =”rect” cords=”0.0.31.31” href=”” title=”home”>

Rect 矩形 0.0是左上角的左边，31.31是右下角的坐标

CSS Sprites

CSS精灵，通过使用合并图片，通过制定css的Backgroud-image和background-position来显示元素。

Backgroud-positon属性：

x和y可以写负值和正值，我们可以想象图片的左上角为(0.0)，向右为负数X轴，向下负数y轴

比如span{

         Background-position:0,0

         Margin-right:4px;

         Margin-left:4px;

}

.gift{

         Background-position:-32px,0

         Margin-right:4px;

}

对性能来说，图片地图和CSS精灵相应时间基本相同，但比使用各自图片的方式要快50%以上，通常CSS精灵比较简单，所以用的比较多

合并脚本和样式表

使用外部的JS和CSS文件应用的方式，因为这要比直接写在页面中性能更好

但增加了HTTP请求，不过可以合并，独立的JS比用多个JS文件的页面载入块38%

把多个脚本合并成一个脚本，把多个样式表合并成一个样式表

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

页面加载很多图片，对这些图片有些可以合并，有些不太合适合并，我们可以把图片做Base64编码，将图片直接嵌入网页中，而不是从外部载入（直接以数据显示了）

比如<img src=”data:image/gif;base64,/9j/4AAQSkZJ……”> 这个base64可以通过PHP帮我们生成。这样可以减少HTTP请求，页面变大一些。