小知识,大挑战!本文正在参与“程序员必备小知识”创作活动
一方面由于浏览器对于接口请求并行数量是有限制的,同一时间只允许6条左右的请求并行(不同浏览器存在差异),当请求数量超过并行数量时,那么多余的请求就需要进入到排队状态,只有当并行中的接口完成了,才能进入到接口请求中,因此优化HTTP请求的数量可以很好的优化性能
另一方面在浏览器发出HTTP请求时,会消耗了大量的时间,尤其是在网络情况比较糟糕的时候,对于性能更是毁天灭地的打击
一个正常HTTP请求的流程简述:浏览器与服务器进行三次握手,确定可连接之后浏览器再与这个资源指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行。
可以看出每一个HTTP请求是非常耗时的,而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个HTTP请求都会对服务器和浏览器产生性能负担。
在网速相同的条件下,下载一个100KB的图片比下载两个50KB的图片要耗费的网络资源更多。减少HTTP请求非常有利于性能
具体的方法:
-
组合文件,优化图片,使用sprites设计风格: 将背景图片合并成一个文件,通过
background-image和background-position控制显示;确保您的图像不大于它们所需的图像,它们采用正确的文件格式(PNG通常更适用于少于16种颜色的图形,而JPEG通常更适合照片)并且它们是针对Web压缩的。
使用CSS sprites在网站上经常使用的图像创建模板,如按钮和图标。CSS sprites将您的图像组合成一个大图像,一次加载所有(这意味着更少的HTTP请求),然后只显示您想要显示的部分。这意味着您通过不让用户等待加载多个图像来节省加载时间。
-
肉联图片,使用
data:URL方案将图像数据嵌入实际页面中。这可以增加HTML文档的大小。将内嵌图像组合到(缓存的)样式表中是一种减少HTTP请求并避免增加页面大小的方法。 -
简化页面的设计