前端性能优化

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

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、延迟执⾏行

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

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