常见减少HTTP请求的方式

常见减少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>标签

    示例:

    没有使用图片地图的链接

    使用图片地图的链接

    1562947651298

  • CSS 精灵

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

    示例地址:

    使用CSS精灵

    css精灵效果图

图片地图和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编码前后效果

使用Base64演示1CSS背景

使用Bsae64演示2分别使用