网页性能优化之探索原理

作者:jcmp      发布时间:2021-04-13      浏览量:0
时间如白驹过隙,转眼到了5月。风都带着初

时间如白驹过隙,转眼到了5月。风都带着初夏的味道。马上杭州就要热成大便了,写篇文章冷静冷静。

此处进入正文

众所周知,网页性能优化一直是前端的必修课程。那么,很多人会说,"这不是很简单嘛,网上一搜,罗列出一堆性能优化的解决方案"。

的确是,看看网上搜出来的方法,琳琅满目,应有尽有,大概有下面几个:

1、合并css,js

2、图片用雪碧图

3、减少HTTP请求数

4、压缩js、css等静态资源,减小大小

...

是的,这些也就是网页性能优化的几个比较核心的点,但是今天我想说一下我个人对这些性能优化方法的原理的理解。

从浏览器的并发请求上限入手

每一个浏览器都会有一个并发请求资源数的上限(针对的是同一个域名下),超过限制数目的请求会被阻塞,就会造成浏览器卡住的效果。

Roundup on Parallel Connections ​ www.stevesouders.com。

Max parallel http connections in a browser? ​ stackoverflow.com。

大家也可以自行到各个浏览器里模拟并发请求,观察一下各大浏览器的并发请求上限。

很多大型网站,都不会把图片、js、css等资源放在主域下请求,而是放在类似 img.alicdn.com ,static.alicdn.com 这样的域名下去请求,究其原因,就是希望能减少对主域的资源请求压力,正常的api请求不会受到这些静态资源的影响,还有一个原因很多人新人可能不知道,在主域下请求资源会带上浏览器下的cookie信息,若是把这些静态资源也放在主域下,每次请求这些静态资源都会带上cookie信息。假设每个cookie为1KB,网站首页有100个资源要请求,请求过程中要发送100KB的cookie信息,按照现在常见的512Kbps的上行带宽,需要大概2秒钟才能发完,尽管这个过程中是可以并发请求资源的,但是多少还是受点影响。有些大一点的厂子,还会把静态资源分发到不同的cdn下,如img1.alicdn.com、img2.alicdn.com,然后在指向同一个服务。

对于把图片资源上传到雪碧图,我个人不是很建议这样用,对于小厂而言,页面的改动比较频繁,每次都要让设计师改一下雪碧图,然后前端这边又要重新定位,当然市面上也有很多工具做雪碧图的定位,但是还是挺烦的。

文章虽短,但是作为一个小知识点,以后开发页面的时候,能解决不少疑惑,做性能优化的时候做到心中有数。抓住重点"浏览器在同域下并发请求是有上限的"。