常见减少HTTP请求的方式
为什么要减少HTTP请求
性能黄金法则
只有10%-20%的最用用户响应时间花在请求HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等)进行的HTTP请求上。
如何改善?
最简单的途径就是减少组件的数量,并由此减少HTTP请求的数量
HTTP连接产生的开销
域名解析–TCP连接–发送请求–等待–下载资源–解析时间
疑问?
DNS缓存
Keep-Alive
注意:
查找DNS缓存也需要时间,多个缓存就要查找多次,有可能缓存会被清除
HTTP1.1协议规定请求只能串行发送,也就是说一百个请求必须一次逐个发送,前面的一个请求完成才能开始下个请求
减少HTTP请求的方式
图片地图
图片地图允许你在一个图片上关联多个URL,目标URL的选取取决于用户单击了图片的哪个位置
如多张图标图片,我们可以将多个图片合并为一张图片,然后以位置信息定位超链接,把多个HTTP请求减少为1个,可以保证设计的完整性和功能的齐全性
使用
<map> <area></area> </map>
标签示例:
CSS 精灵
CSS Sprites中文翻译为CSS精灵,通过使用合并图片,通过指定元素CSS的
background-image
和background-position
来显示元素。示例地址:
图片地图和CSS精灵的响应时间基本上相同,但比使用各自独立图片的方式快50%以上
合并脚本和样式表
首先还是要使用外部的js和css文件引用 的方式,因为这要比直接卸载页面中性能更好
但这样会增加HTTP请求,因此可以将多个js和css合并
独立的一个js比多个js组成的页面载入要快38%
合并前示例及效果
合并后示例及效果
图片使用Base64编码减少页面请求数
采用Base64的编码方式将图片直接嵌入到网页中,而不是从外部载入
1 | <img src="data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAABCpTlCrVKE1lqU94y176VCGLW1tb29tcbGvc7OxtbWztbW1tbe1t6MQt7e1t7e3ufn1ufn3ufn5+fv3u/v5+/v7/etSvf35/f37//vrf///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEAAAAALAAAAAAfAB8AAAj+AAEIHEhQwoIECQ4oRLhAAsGHEAc+SJjgAQQJEyY8mHigYsSIExQceDChgkmTJVE+OKBgwseBEhK0zFiyJsoKNRUkcPgx5oKTN1PaTHmQ58MJMoMqxcmUadGHFZLSpBkgAFWrUzMqUFCB4MoJEsKGnYDVaoCwWKdKGDkwakuxYs9KOCtXLlwJOrsCWPtAAoSNfi8GeEB37kUIfwOvfACggs6NkP9CriqgKuTLkJO6xfzAgWfPAwgM+OzAAGeEJhEoeLCAdWsHGmJrCD1AtgYDrRfk1pmRpevWCmBfGE57+HDcun8fwIlAt/PXGowXN478+YIDGVVbXyCcuGjjF6rPPz9AYYLq37oHFCDAnjZ79gK2846aYHv3C9OPW5+YQGv93NBJ9x11yTmHWgUrAajbffmF9xxrI6GEEGsUMjjgcQwAqJMEXYV0QG4QLGDAiCMKYCKJIy4QYogs6VUBBRNepmJrkIGIGUIcDqSRb5hJFhlnIpFEEE4HKSABYEj2BdmRGynQXElQhYRjX0eGRaWSRzq5AJQQEZmQkVhWWaVI9XEZEU4P6NQRjUyqiaOZH5mUJUIK1YmQkRzq9VJbODFJIWAZ6bknVCiVV95JewYEADs="> |
使用Base64编码前后效果