前端性能分析与优化

页面性能优化是前端绕不开的问题，本篇文章将讨论

1. 如何进行页面性能优化
2. 怎样评价页面性能

浏览器加载过程

分析浏览器加载页面的过程，然后在其中的各个环节进行优化。

1.建立连接过程

1. DNS解析 浏览器查找域名的IP地址
2. 浏览器给web服务器发送一个HTTP请求
3. 服务器发送永久重定向响应
4. 浏览器跟踪重定向地址
5. 服务器“处理”请求
6. 服务器发回一个HTML响应，返回相应的数据（html、css、js、图片等）

2. 浏览器渲染解析HTML

1. 构建DOM树
2. 渲染树构建
3. 渲染树布局
4. 绘制渲染树

优化思路

针对以上过程，可以用以下方式进行优化：

浏览器缓存

可以减少DNS查询和资源请求的时间。
　
浏览器要根据域名找出IP地址，而DNS查找过程的第一步是在浏览器缓存中查找，根据Chrome的PageSpeed给出的建议：要利用浏览器缓存存储可缓存的资源。在 HTTP 标头中为静态资源设置有效期或最长存在时间，可指示浏览器从本地磁盘中加载以前下载的资源而不是从网络中加载。 关于浏览器缓存，可以参考之前一篇

页面内容组织

① 为 HTML 文档指定字符集，可让浏览器立即开始执行脚本。　　
② 将内嵌样式块和 元素从文档主体移至文档标题，可改善显示性能。　　
③ 将小型样式表或者脚本内嵌到主 HTML 网页中，可减少在下载其他资源时的往返时间 (RTT) 和延迟时间。
④ 正确地排列外部样式表与外部和内嵌脚本的顺序，可增加下载时同时加载的数据量，并提高浏览器显示网页的速度。为确保能够并行下载这CSS 文件，始终将外部 CSS 文件排在外部 JavaScript 文件前面。

HTML

① 使用HTML5新标签，例如header、footer、section、nav、article。因为它们语义化，速度快，结构合理，浏览器上识别能力强。　　
② 减少HTML标签嵌套深度，嵌套越深，在移动端的Web页面渲染速度以及滚动流畅度都会有所减低。　　
③ 为图片指定大小，减少重排。　　
④ 压缩HTML。

CSS

① 使用CssSprite将零星的背景图包含到一张图中，通过background-position来使它显示在正确的位置；只请求一张图，减少了HTTP请求的次数。　　
② 模块化、精简css，提高复用率。　　
③ 减少渐变、阴影的使用。　　
④ 合理使用CSS3高性能动画，Translate3d支持硬件加速。　　
⑤ 避免使用滤镜。　　
⑥ 不使用@import。　　
⑦ 合并和压缩CSS代码。

JavaScript

① 暂缓 JavaScript 解析，暂缓解析不需要的 JavaScript（等到需要执行时再进行解析），可以提高网页的初始加载速度。　　
② 使用事件委托机制，避免频繁操作DOM节点。　　
③ 模块化代码：SeaJs。　　
④ 合并和压缩JavaScript代码。
6、 图片优化
① 图片时页面大部分加载时间所花的地方，在图片设计的时候应该考虑相应的图片大小和格式
② 压缩图片

以上是针对整个页面加载的过程给出的优化方向，但是如何评价优化效率呢？如果我们有能够分析页面性能的工具就好了，这样对比优化前和优化后的指标，就可以得到优化的具体提升值了。

性能分析工具

市面上有很多较为成熟的性能分析工具可以帮助我们分析页面性能。

基于网页分析工具：

1. 阿里测
2. 百度应用性能检测中心
3. Web PageTest
4. PingDom Tools
5. GTmetrix

基于浏览器分析工具：

1. Chrome自带工具F12
2. Firefox插件：YSlow（Yahoo工具）
3. Page Speed（google）

每个工具都有很多细分的指标用来评价页面性能，前端比较通用的指标有：

• DNS查询耗时
• TCP链接耗时
• request请求耗时
• 解析dom树耗时
• 白屏时间
• domready时间
• onload时间