前端性能优化

　　先让我们看看一张网页是怎么来的，也就是从用户输入完一个网址点下“ENTER”键到整个页面加载出来中间发生了什么。首先我们了解下HTTP过程：

一、寻找IP（每一步都是在上一步没找到的情况下进行的）

本地阶段：

1、浏览器搜索自身缓存；

2、搜索操作系统自身的DNS缓存；

3、地区本地HOST文件；

4、浏览器发送DNS系统调用；

路由阶段：

1、宽带运营商服务器查看本地缓存；

2、运营商服务器发起一个迭代DNS解析请求；

com -> baidu.com -> www.baidu.com

3、运营商服务器把结果返回给操作系统内核同时缓存起来；

4、操作系统内核把结果返回个浏览器

浏览器得到IP了。

二、建立连接并获取内容

1、发起HTTP三次握手，建立TCP/IP连接；

2、发起HTTP请求；

3、服务器端读取数据库并处理数据后返回页面内容；

这样获得了一个页面，但是页面的js文件、css文件、图片都要经过这样的过程！

4、渲染页面；

我们写baidu.com和www.baidu.com同样都会跳转到百度首页，但是baidu.com是经过了一次301页面跳转到www.baidu.com的，多了一次DNS查询；

常见状态码：
1xx 请求已接受
2xx 处理完毕
3xx 重定向
4xx 客户端错误
5xx 服务器端错误

200 OK成功
400 客户端语法错误
401 没有经过授权
403 拒绝服务
404 没找到页面
500 错误
503 不能处理

三、渲染页面

1）浏览器会解析三个东西：
一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
CSS，解析CSS会产生CSS规则树。
Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

2）解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意：
Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。

3）最后通过调用操作系统Native GUI的API绘制。

实际上这个过程非常复杂，某些地方的顺序也随着脚本、网络等情况的不同而不同，这里只是个简略介绍。

四、重头戏：优化。

1. 尽量减少HTTP请求
2. 使用内容发布网络（CDN加速的使用）
3. 添加Expires头
4. 压缩组件（使用Gzip方式）
5. 将CSS样式表放在顶部
6. 将javascript脚本放在底部
7. 避免使用CSS表达式
8. 使用外部javascript和CSS
9. 减少DNS查询
10. 精简javascript
11. 避免重定向
12. 删除重复脚本
13. 配置ETag
14. 使ajax可缓存

1、压缩脚本，合并文件，去掉空格换行等，使用外部文件js，有利于缓存。将js放到最后，让用户先看到页面，提升用户体验。

2、css放在head标签内，防止无样式闪烁。

3、不要这样写：<a href='https://www.baidu.com'>百度</a>,要这样写：<a href='https://www.baidu.com/'>百度</a>。

4、压缩图片，使用雪碧图等。

5、避免使用CSS表达式，有人说只能在IE里用的东西没有什么好东西。

6、使用 <link> 而不是 @importChoose <link> over @import，这样相当于把CSS放到文件最下面。

7、页面展现尽量只让CSS做。

8、减少DOM操作，信息传递尽量使用JSON。

9、避免重绘，可以通过使用css或者绝对定位减少影响范围。

10、减少Cookie的使用并尽量使cookie小。