web加载优化

Posted life-fxl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web加载优化相关的知识,希望对你有一定的参考价值。

 

 

三个阶段


1. 加载阶段;

   (1) 减少关键资源的个数(合并文件,CSS精灵,base64、懒加载);

   (2) 降低关键资源的大小(减少cookie的传输、开启gzip压缩、webpack打包压缩);

   (3) 降低关键资源的RTT(往返延时)次数(DNS预解析、使用HTTP2、HTTP缓存、CDN、避免重定向);


2. 交互阶段;

   (1)减少js脚本的执行时间(拆分多个任务、web worker)

   (2)避免布局抖动、避免重排重绘(事件委托)

   (3)合理利用CSS动画(减少js动画)

   (4)避免过多的全局变量;

 

3. 关闭阶段;

以上是关于web加载优化的主要内容,如果未能解决你的问题,请参考以下文章

web性能优化之---JavaScript中的无阻塞加载性能优化方案

H5缓存机制浅析-移动端Web加载性能优化干货

Web页面加载,如何分析页面性能?如何进行优化?

关于web页面优化

web前端性能优化汇总

WEB前端性能优化总结——如何提高网页加载速度