常见的前端性能优化手段都有哪些?都有多大收益?

4天前 (03-05 08:07)阅读1回复0
zaibaike
zaibaike
  • 管理员
  • 注册排名1
  • 经验值202325
  • 级别管理员
  • 主题40465
  • 回复0
楼主

下面讲一下我的测试,根本思惟就是测试一种优化手段在利用前后性能能否有所提拔,以及提拔了几。我测试的优化手段是以下几个:合并恳求、域名拆分、开启Gzip、开启keepalive、Minify。

刚好春节前为了做手艺分享做过一组测试,我能够分享一下本身的数据。(一般收益有多大按照营业差别也会差别的,硬要说有多大收益,其实并没有一个“尺度”,我的数据也只能做个参考)。

构造被测页面

因为差别的网站页面大小差别,js/css个数差别,图片个数差别,好比淘宝首页和百度首页不同就十分大,所以构造被测页面确实没有一个完美的办法。我接纳的办法是参考httparchive(

http://httparchive.org/

)比来的统计值,决定网页中有几个js/css和图片,以及它们的大小(数字并没有完全切确相等,但是比力接近),所以,构造的基准网页构造如下:

1.总恳求数90,总大小1.6MB

2.HTML恳求1个,大小4.1KB

2.CSS恳求5个,总大小71.2KB,内容为一些开源的CSS库,因为测试只考虑网页的加载性能,不考虑衬着性能,所以CSS规则抵触之类的问题能够忽略。

3.JS恳求27个,总大小404KB,内容为一些开源的JS代码,和上一条原因不异,忽略JS的施行效率问题,选择的代码中不包罗对dom树的更改,所以理论上不会影响资本加载进度。

4.图片恳求57个,总大小1.1MB,此中大图12张,体积3KB以下的小图标45个。

选择测试东西

那种测试更好有大量的测试样本和切确的目标计算,手工测试会累残,单机测试也禁绝,更好在全网范畴内停止实在用户客户端的测试。市道上有一些供给测试的办事商,选择了此中的性能魔方(

http://www.mmtrix.com/

),有免费额度可用,收费版也不贵。

构造被测网站

那个不多说了,阿里云上买了一台虚拟机,绑定了域名,开了nginx,对差别的优化手段停止差别的设置装备摆设,好比开关gzip的设置装备摆设等。虚拟机是1核2G,Ubuntu的系统,按流量收费,峰值带宽100M。说个题外话,按流量收费实是太贵了,做个测试差点没把我做破产。

优化手段1:合并恳求

合并恳求的次要目标是削减阅读器对办事器倡议的恳求数,从而削减在倡议恳求过程中破费的时间。本测试接纳了合并JS、合并CSS以及合并小图片(也就是利用CSS精灵)等体例来削减恳求。优化前,页面的恳求数和大小如上文所说,优化后,情况如下:

1.总恳求数18,总大小1.6MB

2.HTML恳求1个,大小4.3KB

2.CSS恳求2个,总大小70.5KB,考虑到良多网站会有各个页面都利用的公用CSS,所以测试中并未把所有CSS合并成1个,而是合并成了两个。

3.JS恳求2个,总大小398KB,与上一层次由差不多,也合并成了两个JS文件。

4.图片恳求13个,总大小1.1MB,利用东西将45个小图标合并成了一张图片。

合并前的网页地址:

http://jianfeng.in/combine/index.html

,未开Gzip,未开KeepAlive

合并后的网页地址:

http://jianfeng.in/combine/combined.html

,未开Gzip,未开KeepAlive

(如今拜候那两个地址可能会有点慢,因为我把云主机的设置装备摆设从100M带宽按流量收费改成了1M带宽按带宽收费了,测试的时候阿里云光流量费用就一天收了我100多大洋,再也不敢那么率性了)

烦琐了那么多,是时候看成果了

上图中,颜色越靠近绿色速度就越快,越靠近红色就越慢。能够很曲不雅的看出,在全国范畴内,未优化网页明显比合并恳求的网页慢良多。

能够看出,在2月6日一成天的测试数据中,优化前后所有样本的均匀整页时间(总下载时间)从10.65秒提拔到了4.15秒,性能提拔1.56倍,同时可用性也有所进步,次要是因为恳求数变少了,恳求出错的概率就降低了。那里能够得出一个结论,在利用HTTP/1.1和HTTP/1.0的时候,能削减HTTP恳求就尽量削减HTTP恳求,因为每个恳求城市消耗良多时间。关于利用HTTP/2.0的情况,我还领会不多,貌似利用Server Push手艺能够无视资本数,有高手晓得还望指教。

优化手段2:域名拆分

域名拆分次要是为了增加阅读器下载的并行度,让阅读器能同时倡议更多的恳求,所以本组尝试次要由三个尝试对象:

1.上文描述的基准网页,地址为:

http://jianfeng.in/combine/index.html

2.将基准网页中的JS、CSS和图片别离利用三个域名加载,别离是 http://js.jianfeng.in、http://css.jianfeng.in、http://img.jianfeng.in,地址为:

http://jianfeng.in/dns/dns3.html

3.在2的根底长进行更多的拆分,共9个,别离为http://js1.jianfeng.in、http://js2.jianfeng.in、http://css1.jianfeng.in、http://css2.jianfeng.in、http://img1.jianfeng.in、http://img2.jianfeng.in、http://img3.jianfeng.in、http://img4.jianfeng.in、http://img5.jianfeng.in,地址为:

http://jianfeng.in/dns/dns9.html

同样都未开启Gzip,未开启KeepAlive,成果如下

从成果中能够看出,拆分域名后,整页加载时间有所减低,但是并没有合并恳求效果那么明显。此中,拆分为3个域名之后,整页时间降低了22%,拆分为9个之后,整页时间降低了25%。

其实那里有一点不契合我的预期,根据我看到的材料,域名拆分为3到5个比力适宜,过多的域名会带来DNS解析时间的损耗,可能会降低性能,所以9个域名应该不会比3个域名性能好。在我的尝试里,9个域名的DNS解析总时间也确实最长,到达了0.77秒。小我推测,原因可能是在我的尝试中,恳求数比力多,DNS解析带来的性能损耗比并行下载带来的性能提拔要小,所以总体上9个域名的性能仍是比3格域名要好的。当然,那里只是推测,各人若是有差别见解,能够评论里讨论。

优化手段3:开启Gzip

Gzip是一种压缩手艺,能够将资本在办事端停止压缩,然后发送给阅读器后再停止解压,那种体例会降低传输大小,进步网页加载性能。本组尝试的尝试对象有两个:

1.基准网页,地址为:

http://jianfeng.in/combine/index.html

2.对基准网页开启Gzip,地址为:

http://gzip.jianfeng.in/combine/index.html

两个网页均未开启KeepAlive,成果如下:

从成果能够看出,开启Gzip后,整页时间从10.65秒降低到10.06秒,性能提拔5.5%,页面大小从1572.14KB降低到1257.69KB,降幅为20%。因为测试页面中大量的内容是图片,而我又只对JS/CSS/HTML类型的资本开启了Gzip,所以优化收益一般,关于以文本为主的页面,Gzip的优化收益应该是很大的。

优化手段4:开启KeepAlive

开启KeepAlive可以削减阅读器与办事器成立毗连的次数,从而节省成立毗连时间。本组尝试的对象有两个:

1.基准网页,地址为:

http://jianfeng.in/combine/index.html

2.对基准网页开启了keepalive,地址为:

http://keep.jianfeng.in/combine/index.html

两个网页均未开启gzip,成果如下:

从成果能够看出,开启KeepAlive后,整页时间从10.65秒降低到6.19秒,性能提拔41.8%,成立毗连次数从89次降低到8次,成立毗连总时间从7.31秒降低到1.86秒。关于统一个主机上恳求数较多的的页面,开启KeepAlive能够较好的进步性能,但是开启KeepAlive也会使办事器负载变大,也愈加容易遭受攻击,现实项目中需要权衡利弊。

优化手段5:Minify

Minify指的是将JS和CSS等文本文件停止最小化处置,一般关于CSS来说就是去除空格去除换行去除正文等,关于JS,除了上述办法外,还能够停止变量名替代,将长变量名替代为短变量名。目前有良多用户做Minify的东西,例如uglifyjs等。因为Minify只是对文本类资本停止的优化操做,所以本组尝试的两个尝试对象都是对基准网页停止必然的处置后而来,起首将基准网页中的图片删去大部门,只保留一张,其次,将JS和CSS先辈行合并处置。得到尝试对象如下:

1.未做Minify的网页,地址为:

http://jianfeng.in/minify/index.html

2.对JS和CSS做了Minify的网页,地址为:

http://jianfeng.in/minify/minified.html

以上两个网页均未开启gzip和keepalive,成果如下:

从成果能够看出,minify前后,整页时间从1.69秒降低到了1.24秒,性能提拔了26.6%,页面大小从504.05KB减小到224.52KB,降幅为55.4%。Minify除了能够进步页面加载速度之外,还有别的一个收益,那就是能够降低网站的带宽费用,因为Minify是实其实在减小网页大小的。

总结

上述几个测试算是能够粗拙的证明常见的网页性能优化手段都是有收益的。在尝试里有些手段收益大,有些手段收益小,在现实消费情况中,仍是要按照本身的站点现实情况以及投入产出比停止利用。总之,他人的数据对本身的产物的价值仍是有限的,重点是测试本身的站点,权衡本身的收益,用本身的数据指点本身的优化行为,如许才气获得更好的用户体验。

0
回帖

常见的前端性能优化手段都有哪些?都有多大收益? 期待您的回复!

取消