浏览文章

文章信息

前端性能优化 15

1、域名散发。

原理:
浏览器对静态资源的请求并发有限制,每种浏览器对资源并发请求限制不相同,大体在4~8并发。当你网站一次性存在100个请求,可能就需要几秒钟才能加载完成,极大的影响网站加载速度。这个时候我们采用图片使用一个或者几个域名对每种静态资源做加载。例如:图片使用一个或者几个域名进行加载。css和js也同样使用一个或者几个域名加载,这样资源请求并发数就从一个域名的4~8个提升到4*x~8*x个(x是域名个数),域名建议4个左右。

优点:
提升浏览器对静态资源的并发数,再加上CDN,加载速度极大提升。

缺点:
需要运维和开发协同完成。DNS解析需要一定的时间,建议4个左右。

2、Free Cookie

原理:

同域的资源会携带cookie。如果一个cookie容量是5kb,如果一百个并发请求,500kb大小(忽略并发),确实存在影响带宽的情况。所以,不必要的资源请删除Cookie。

优点:

减少带宽占用,将带宽分给其他任务,加快网站加载速度。

缺点:

需要开发者甄别静态资源去除Cookie。静态资源确实没必要上Cookie.

3、懒加载。

原理:

从减少资源并发请求量方面出发,将可视区域的图片,视频,iFrame,Dom元素等先加载,其余部分随着窗口变动才加载,这样就不会出现一次性加载全部资源的情况。

优点:

减少资源并发数,加快网站首次渲染,能够根据可视窗口所需加载资源。

缺点:

需要开发者修改现有网站代码。

4、Cache-Control-max-age资源缓存时效控制

原理:

将不经常更新的资源缓存到浏览器,设置浏览器缓存时间时长,达到在缓存时长内请求从本地磁盘或者内存加载,减少网络负担。

优点:

加载过的资源在时效期内通过本地加载,减少网络负担,能够快速响应请求,提升非首次加载速度。

缺点:

注意甄别控制资源的缓存时效,过长可能导致不变url的资源,客户在很长时间里看不到最新版本资源。

 

原创