前端性能优化分析和对策

1.分析

从用户输入 url ，按下回车到网页呈现过程中跟前端相关的过程：

1. 缓存
2. DNS查询
3. 建立TCP连接（无关）
4. 发送HTTP请求
   后台处理
5. 接收响应
6. 接收完成 -> HTML
7. 解析 查看DOCTYPE html/xml
8. 逐行解析
9. 遇到 html 标签
10. 遇到CSS，会下载CSS，同时往下查看，如果还有CSS文件，就会一起下载，但是解析的时候不会同时解析，即下载并行，解析串行。（chrome会阻塞html渲染，ie不会，看浏览器）
11. 遇到JS，跟CSS相同，下载并行，解析串行。（一定会阻塞html渲染）

2.优化对策（分治）

1. DNS查询：

• 减少DNS查询，尽量减少域名数。

2. 建立TCP连接：

• 连接复用，在发送http的请求头中设置Connection: keep-alive。
• HTTP/2.0 多路复用

3. 发送请求：

• 减少cookie体积，使用 CDN ，CDN没有cookie
• 使用 cache-control
• 同时发送多个请求，浏览器会自己去请求，比如同时请求多个CSS，JS，但是同时发送请求数量会有限制，一个域名只能发送4个，那么要是需要发送多个，那么就需要增加域名，如：css.cdn.com/n.css，js.cdn.com/n.js。跟DNS查询减少域名会有矛盾，这个时候需要权衡，假如文件很多，那么增加域名，增加请求并发数，减少请求时间，如果文件很少，那么就不要增加域名。
• 合并文件，比如合并js，合并css。

4. 接收响应

• ETag 制造304响应，不需要重新接收所有的请求，可以使用上一次的结果。
• 使用 gzip 进行压缩，文件较大时使用 gzip 压缩。

5. 接收完成

• 要写 DOCTYPE 并且不能写错。

6. CSS

• 增加域名，增加下载的并发数量
• 文件大的话就用 gzip 压缩
• 放在 head 中
• 使用 CDN，增加并发数，解除光速的限制。

7. JS

• JS放body的最后

8. 延迟加载和预加载
**9. 避免空 src 的图片

• 可以用

10. 使用事件委托，减少监听器

3.如何测试网站优化

chrome 开发者工具，Audits，可以查看。