web前端80%响应时间花在了图片、样式、脚本等资源下载上。我们不能减少页面请求资源，所以通过将资源整合到一个文件，从而减少HTTP请求，来达到优化目的。
合并JS/CSS文件
服务端（CDN）会自动合并。
基于Node.js的文件合并工具，把所有脚本放在一个文件中。
前端可以使用打包工具：
- webpack
- gulp
缺点：
- 将所有JS/CSS文件打包生成一两个文件，如果发生改动，需要重新生成文件，不利于缓存
- 需要1%资源，可能引入了所有资源，导致浪费带宽。
行内图片（base64编码）
通过Data Url scheme将图片嵌入到HTML/CSS中。
优点：
- 减少HTTP请求。
- 图片的体积太小，占用一个 HTTP 会话不值得。
- 没有图片更新要重新上传，还要清理缓存的问题。
问题：
-
Base64 编码的数据体积大于原数据的体积。
-
Data URL 形式的图片不会被浏览器缓存，每次访问页面时都被下载一次。
-
不适合 lazy loading。因为没有请求。
-
不利于维护。
字体图标
-
字体图标可以减少很多图片的使用，从而减少http请求。
-
原理：
-
根据 unicode 去查找绘制外形。
图片懒加载（预加载）
不需要将看不到的图片加载出来，具体实现：
- 先加载可视化区域部份的图片，比如先加载10个图片。
- 通过滚动到具体位置再进行加载。
HTTP缓存
- 强制缓存 和 协商缓存
HTTP1.0
-
Expires：
-
强制缓存，缓存服务器上的过期时间。
-
问题：受限于本地时间，如果用户修改了本地时间就没用了。
-
Last-Modified：
-
协商缓存，资源在服务器上的最后修改时间。
-
问题：一个资源被修改了，但实际内容没发生改变，也会返回整个实体给客户端。
HTTP1.1
-
Cache-Control：
-
强制缓存，可以设置过期时间，url发生改变就会重新请求。
-
配合Webpack的hash文件名使用。
-
Code：200。
-
ETag：
-
协商缓存，设置一个值，如果响应的资源没有发生改变，就会使用上一次的。
-
如果发生改变就会重新响应，并重新给值。
-
Code：304。
总结：
关于减少HTTP请求的方法，还有很多，这里就不一一讲述了。如果有兴趣可以看看网上其他的文章或书籍，大部分都是关于雅虎35条军规中的，本人是对其简化归纳了。
