为什么减少HTTP请求

image.png

HTTP连接产生的开销

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

疑问

1.DNS缓存
查找DNS缓存也需要时间多个缓存就要多次有可能缓存会被清除
2.Keep-Alive
HTTP1.1协议规定请求只能串行发送，也就是说一百个请求必须依次逐个发送，前面的一个请求完成才能开始下个请求

减少HTTP请求的方式

图片地图

• 图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片的哪个位置
• 我们可以通过5个分开的图片，然后每个图片对应一个超链接产生了5个HTTP请求，我们的目标是要减少HTTP请求
• 将五个图片合并为一张图片，然后以位置定位超链接
• 把HTTP请求减少为1个，可以保证设计的完整性和功能的齐全性
• 使用<map><area></area></map>标签

CSS Sprites

CSS精灵
background-image和background-position

合并脚本和样式表

外部js和css引用
多个合并

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

采用Base64编码方式将图片直接嵌入到网页中，而不是从外部载入
<img src="data:image/gif;base64,/9j/4AAQSkZJ......">
css background-image