face 31减少http请求

减少http请求

为什么要减少http请求

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

如何改善

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

http链接产生的开销

域名解析-tcp链接-发送请求-等待-下载资源-解析时间

dns缓存是有，但是查找dns缓存也需要时间，多个缓存就要查找多次 同时还有可能缓存会被清除

http1.1协议规定请求只能串行发送，也就是说一百个请求必须一次逐个发送，前面的一个请求完成才能开始下个请求

减少http的方式

图片地图

图片地图允许你在一个图片上关联多个url,目标url的选择取决于用户点击了图片上的那个位置，就是图片合并 以位置信息定位超链接

把http请求减少为一个，可以保证设计的完整性和功能的齐全性

<img  usermap="#map1">

<map name="map1"><area shape="rect" coords="0,0,31,31" href="javascript:alert('home')" ></area></map>

css sprites 比图片地图 简单一些

css sprites [css精灵],通过使用合并图片，通过指定，css的backgroud-image和backgroud-position来显示元素

x,y定位图片位置

合并脚本和样式表

使用外部的js和css文件引用的方式，因为这要比直接写在页面中性能要好一点

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

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

图片使用 base64编码减少页面请求数--页面会变大写

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