WEB 优化大法好

web 加载环节及个每个环节的优化处理

1. DNS查询

减少 DNS 查询，即减少请求的域名数量。

2. TCP协议

使用 TCP 连接复用，在请求头处添加 keep-alive ，使用 http 2.0 的多路复用可提高复用率。

3. 发送 http 请求

• 减少 Cookie 体积。用于 Cookie 都存在主域名下，CDN 没 Cookie，所以利用 CDN 请求静态资源可达到减少 Cookie 体积的目的。
• Cache-Control 缓存，限定时间内不发送请求，使用本地缓存的文件。
• 增加并发加载数。即同时发送多个请求来提高加载速度（浏览器自带）。请求文件多时，文件放在不同的域名中，同时请求。一个域名默认四个请求，多个域名提高请求数。虽然DNS 查询时间增加，但是 http 请求时间减少了。仅限需要请求的 css / js 文件数量多才使用该方法。

4. 接受响应

• ETag 做 304 响应。请求时带上的 md5 ，服务器判断是否需要下载新文件。md5 一样就不下载文件。

• GZip 压缩。服务器用 GZip 压缩文件，浏览器得到响应后再解压。由于文件被压缩过，文件体积减小，加载速度便提升了。

  
  
  

5. HTML

删除多余空格……（作用不大）

6. DOCTYPE

必须写，并且不要写错，避免浏览器多个文件格式解析，令渲染时间变长。

7. 浏览器渲染解析

该环节基本可跳过……

8. CSS & JS

• 合并 CSS / JS 文件，一般都使用 webpack 等工具。
• 文件多时，可使用 CDN（内容分发网络）。
  两个作用：1.多域名，达到并发加载数效果；2.使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
• CSS 放在 head ，JS 放在 body 最后。CSS 是视觉效果，越早渲染越好，JS 是交互效果，可放缓加载。

9. 延迟加载文件 和 预加载文件

• 先加载第一屏的内容文件，当用户滚动页面时，再加载随后的页面内容。
• 第一屏内容加载后，用户还未滚动页面便预先加载随后内容。

10. loading 动画

利用视觉效果减缓用户的不耐烦。

11. 图片压缩

雅虎前端优化35条规则