前端性能优化(1)--减少HTTP请求

RobinTang 发布于2019-08-05 18:05 / 1401人阅读

摘要：如下图内联图片使用的模式可以在页面中包含图片，但不需要额外的请求，缺点也有体积会大约增加不能多带带缓存，只能依赖于宿主文件的缓存方式。所以，对于资源特别碎片的网站，建议合并一些通用的代码，减少请求。

为什么减少HTTP请求能够优化性能？

HTTP请求建立和释放需要时间

浏览器对同一个域名的并发数量有限制

HTTP请求建立和释放需要时间
HTTP请求从建立到关闭一共经过以下步骤，这些步骤都是需要花费时间的，在网络情况差的情况下，花费的时间更长。如果页面的资源非常碎片化，每个HTTP请求只带回来几K甚至不到1K的数据（比如各种小图标）那性能是非常浪费的。

客户端连接到Web服务器

发送HTTP请求

服务器接受请求并返回HTTP响应

释放连接TCP链接

浏览器对同一个域名的并发数量有限制
浏览器对同一个域名下的资源请求是有限制的，如果页面的并发资源非常多，那后续的资源请求只能等到前面的资源下载完后才开始，这也是为什么我们能在chrome network 的Timing看到Queueing时间（原因之一，另外还有资源优先级什么的）

另附上各浏览器的并发数量

解决方案

CSS Sprites技术

内联图片 & base64

合并脚本和样式表

CSS Sprites技术
传说中的雪碧图，可以将多张图片合成一张，用background-position来定位具体图片的技术，非常适用于一整套小图标的应用场景。如下图：

.img{
    width: 100px;
    height: 100px;
    background-image:url("image.png");
    background-position: -100% -200%;
    background-size: 700% 600%;
}

内联图片 & base64
使用data:url的模式可以在页面中包含图片，但不需要额外的http请求，缺点也有：

体积会大约增加1/3；

不能多带带缓存，只能依赖于宿主（html/css文件）的缓存方式。

例子(一个红色箭头，可拷贝data:image/png...到浏览器中查看)

background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAATCAMAAACwcE1OAAAAaVBMVEUAAADxN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN03xN02cyeRvAAAAInRSTlMAB/z33dRlJPDq48q7lnJMQDItHBUQAwHxxqukhHpbVVM33r4k4AAAAH5JREFUKM99zkcWgkAQRdGiA0kEQcCc/v4XKaePEvQXd/omT5bKWFZUxu702hyBLNFqm2PgO16jDYKiZ/VwwceW5RtGZP+Jifnbry1m0p/9fY4F17HpSRHNps8Ykf0riPJb72BMJcHLgkqbMJ1B4dph2kN16iXGiofUDiqfvAHr4Sb7hIVYtAAAAABJRU5ErkJggg==")

合并脚本和样式表
一般网站都用到了很多的js代码和css代码，尤其是对于用了模块化的网站来说，文件非常多，非常碎片化，初次启动页面的时候，可能一下子就几十个请求出去了，导致首屏时间特别的慢。有关资料现实（如下网址），合并文件的效率要比不合并高1/3。所以，对于资源特别碎片的网站，建议合并一些通用的代码，减少http请求。
下面是两个地址

（来源于O"RILLY《高性能网站建设指南》）

没有合并资源：http://stevesouders.com/examp...（本人测试的1213ms）

合并资源的：http://stevesouders.com/examp... （本人测试909ms）

专线服务云服务器前端性能优化前端开发性能优化 http请求发送http请求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60496.html

浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

Winer 2019-08-20 11:04 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

philadelphia 2019-08-01 15:44 评论0 收藏0
web前端应该从几个方面来优化性能

摘要：从用户角度来说，优化能让页面加载的更快，对用户的操作能及时的响应，能提升用户的更好的体验效果。从服务商的角度来说，优化能解决页面的请求次数，或者减少请求所带来的带宽。 1.从用户角度来说，优化能让页面加载的更快，对用户的操作能及时的响应，能提升用户的更好的体验效果。2.从服务商的角度来说，优化能解决页面的请求次数，或者减少请求所带来的带宽。前端优化的方式有很多，主要可以分为两大类；第一...

ckllj 2019-08-29 12:12 评论0 收藏0
web前端应该从几个方面来优化性能

摘要：从用户角度来说，优化能让页面加载的更快，对用户的操作能及时的响应，能提升用户的更好的体验效果。从服务商的角度来说，优化能解决页面的请求次数，或者减少请求所带来的带宽。 1.从用户角度来说，优化能让页面加载的更快，对用户的操作能及时的响应，能提升用户的更好的体验效果。2.从服务商的角度来说，优化能解决页面的请求次数，或者减少请求所带来的带宽。前端优化的方式有很多，主要可以分为两大类；第一...

andycall 2019-08-01 16:28 评论0 收藏0
前端优化

摘要：如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重复那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。链接：前端优化前端优化浏览器发送HTTP请求，服务器收到请求全文后，返回HTTP响应，在浏览器接收之后结束这个过程。浏览器和服务器只有一次互动的机会，浏览器主动发起，而服务器被动地根据收到的...

Leck1e 2019-08-02 16:15 评论0 收藏0
前端优化

摘要：如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重复那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。链接：前端优化前端优化浏览器发送HTTP请求，服务器收到请求全文后，返回HTTP响应，在浏览器接收之后结束这个过程。浏览器和服务器只有一次互动的机会，浏览器主动发起，而服务器被动地根据收到的...

ad6623 2019-08-30 10:48 评论0 收藏0