http你不得不知道的那些事（九）-缓存细节

前面讲了那么多关于http相关的东西，本篇讲述一个和前端优化息息相关的东西--浏览器缓存。

浏览器缓存大致可以分为两种，强制缓存和对比缓存。

强制缓存的意思是浏览器在缓存过期之前只会使用浏览器缓存的文件，不会发起http请求，对比缓存的意思先请求服务器判断浏览器缓存是否有效，然后再决定是否使用浏览器缓存。

强制缓存有两种类型：expires和cache-control。

Expires的值为服务端返回的到期时间，即下一次请求时，请求时间小于服务端返回的到期时间，直接使用缓存数据。
不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。
另一个问题是，到期时间是由服务端生成的，但是客户端时间可能跟服务端时间有误差，这就会导致缓存命中的误差。
所以HTTP 1.1 的版本，使用Cache-Control替代。

Cache-Control 是最重要的规则。常见的取值有private、public、no-cache、max-age，no-store，默认为private。
private: 客户端可以缓存
public: 客户端和代理服务器都可缓存（前端的同学，可以认为public和private是一样的）
max-age=xxx: 缓存的内容将在 xxx 秒后失效
no-cache: 需要使用对比缓存来验证缓存数据（后面介绍）
no-store: 所有内容都不会缓存，强制缓存，对比缓存都不会触发（对于前端开发来说，缓存越多越好，so...基本上和它说886）

每次发起网络请求时，浏览器会先判断这两个请求头，cache-control优先级高于expires，意思就是当同事有cache-control和expires时，cache-control会覆盖expires（expires无效）。

对比缓存也有两种类型：Etag/If-None-Match和If-Modified-Since/Last-Modified

Etag：服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）

If-None-Match：再次请求服务器时，通过此字段通知服务器客户段缓存数据的唯一标识。
服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对，
不同，说明资源又被改动过，则响应整片资源内容，返回状态码200；
相同，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

Last-Modified：服务器在响应请求时，告诉浏览器资源的最后修改时间。

If-Modified-Since：再次请求服务器时，通过此字段通知服务器上次请求时，服务器返回的资源最后修改时间。服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若资源的最后修改时间大于If-Modified-Since，说明资源又被改动过，则响应整片资源内容，返回状态码200；若资源的最后修改时间小于或等于If-Modified-Since，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

这两组都是共同出现的，一个由服务器返回一个由客户端传送，必须两者配合才能确定是否使用缓存。就优先级来说，Etag/If-None-Match优先级高于If-Modified-Since/Last-Modified。

知道这些有什么用呢？
1、我们知道了为什么我们要用前端构建工具对文件进行md5值打包（打包后可以使用强缓存提高客户端二次访问速度，因为只要文件修改，文件名也跟着修改）。
2、我们可以知道浏览器的缓存机制，决定什么时候采用哪种缓存方式。不采用打包工具打包时最后使用etag的方式，由服务器计算。采用前端构建工具做了hash值打包文件时，最好采用cache-control设置一个比较大的过期时间的方式。当然，html入口页面最好还是不要采用强制缓存的方式。
3、我们可以知道为什么我们的页面没有更新，遇到缓存问题时该如何解决。

等等~

以上是缓存相关的东西，我觉得任何从事网络编程，需要解除浏览器的程序员都应该清楚浏览器的缓存细节。本文参考了@木上有水 的文章，地址为：http://www.cnblogs.com/chenqf/p/6386163.html。他的文章里面还有对应的配图，比本文更加形象生动，感兴趣的小伙伴可以去看下。