前端性能优化

首先要理解优化的对象,弄清楚优化的目标,才能采取正确的优化方法。

1、优化对象

-->前端!

首先清楚打开一个网页要经过哪些步骤:

我们可以看到,主要分为三个部分:网络部分、服务器端、浏览器端

了解了优化对象,我们即可以对每部分进行优化了。

2、优化目标

-->时间!(首要目标)

3、优化方法

-->分层优化!

首先了解需要优化的三层的模型:

关于该模型的详细信息,请参考http://www.w3.org/TR/navigation-timing/

针对网络层,优化原则为:

     1、减少重定向和坏连接

     2、精简⻚页⾯面静态资源的数量和域名数量

     3、使⽤用缓存

     4、谨慎使⽤用Cookie和Https(cookis会带很多数据到服务器端,增大流量;https需要多进行SSL的请求处理)

针对服务器层,优化原则为:

     1、尽早返回首字节内容

     2、异步加载页面底部的html内容

     3、适量压缩html并开启gzip

针对浏览器层,优化原则为:

     1、将CSS放在页⾯面顶部

     2、优化CSS和JS的顺序

     3、控制DOM Tree数量

     4、异步加载部分静态资源

     5、延迟执⾏行

示例:通过下图,可以清楚看到各个部分的耗时情况,可以针对进行优化(绿色字体为时间戳)

此文为阿里技术沙龙的学习笔记,大家可以看《前端性能之精确度量》这个视频

推荐文章:

1、web前端页面性能优化小结

2、[汇总]Web前端优化

原文地址:https://www.cnblogs.com/kivi/p/3193612.html