http缓存学习

今天项目上线后，上级看了项目来找到我，发现前端页面没有更新，但我访问没问题，于是排除了上线的问题。看了上级未更新页面的控制台，发现页面html文件竟然是从缓存中取得，为啥不同客户端访问会出现这种差异呢？这件事激起了我的兴趣，于是便研究了一番（其实是被领导要求下次上线不能出现这种问题(≖ ◡ ≖）

上面知道了浏览器在上线更新了服务器代码之后访问依旧使用了本地的缓存，所以就研究了下浏览器的缓存机制，首先缓存分为浏览器缓存、服务器缓存和代理服务器缓存等，而上面那个问题属于浏览器缓存，所以着重研究了下浏览器缓存。

首先来了解下浏览器缓存机制，客户端访问资源时，首先会先判断当前浏览器中是否有要访问页面的缓存，如果没有就直接去服务端请求新数据，如果有就判断当前缓存是否过期，没过期直接读取缓存，过期了就去请求服务端，但浏览器判断缓存是否过期是需要依据的，在本地没有缓存的情况下第一次请求服务端资源，服务端响应头中会带上资源过期时间相关的头信息（即expires和cache-control两种），浏览器将响应头信息和请求结果同时缓存，下次在请求时就会根据缓存的头信息来判断是否使用本地缓存；不过这次请求不会直接拿数据，服务端会根据客户端的请求头信息（这个请求头信息具体是啥后面再说）来判断当前的缓存是否更新，如果更新了再返回新数据，否则会返回一个状态码（304）以告诉浏览器当前使用的浏览器缓存数据再服务端没有更新，所以浏览器可以放心继续使用当前缓存。

浏览器缓存可以分为强缓存和协商缓存

强缓存：就是给缓存设置一个固定的过期时间或有效期，客户端访问的时间范围小于过期时间或再有效期内则直接使用本地缓存

协商缓存：根据上面的缓存机制，缓存过期后，浏览器会请求服务端，服务端判断缓存内容是否为最新内容，如果是则返回304使用本地缓存，否则服务端返回最新内容

最重要的还是要了解缓存机制过程中的头信息，头信息决定了浏览器如何使用缓存

1. Expires：存在于资源响应头，字段值为一个格林威治时间，表明了资源的过期时间，是http1.0控制缓存的字段，不过考虑到兼容性，采用http1.1的请求中仍然可以看到
2. Last-Modified和If-Modified-Since：http1.0控制协商缓存字段，上面提到协商缓存期间服务端需要根据请求头来判断请求资源是否更新，这里就主要依赖这两个字段，Last-Modified是响应头中的字段，用来表明服务端资源最近一次更新时间，是一个绝对时间值；If-Modified-Since是请求头携带字段，服务器根据这个字段判断当前客户端资源是否为最新，如果不是就重新返回一份最新的内容给客户端并更新If-Modified-Since与Last-Modified一致
3. Etag和 If-None-Match：上面的Last-Modified头信息对应，是http1.1的全新字段，功能上基本一致，Etag对应Last-Modified，If-None-Match对应If-Modified-Since，唯一的区别是Etag字段值变为了后台根据资源内容生成的hash值，好处是只有文件内容更新了才重新返回资源，避免出现文件更新时间改变但内容没变的情况
4. cache-control：同样存在于资源请求头，具有多个可选项用来控制浏览器如何缓存，是http1.1中的字段，用来替代Expires，当Expires和cache-control同时存在时，以cache-control为准，cache-control主要有以下选项

• • max-age：缓存的有效时间，超过了就像服务端请求，类似于Expires，不过不同于Expires的具体时间，这个字段值是“xxx（秒）”，表示多少秒后资源过期
  • no-cache：上面缓存机制提到每次请求资源会经过强制缓存流程判断本地缓存是否可用，如果配置了这个字段，则直接跳过强制缓存直接请求服务器
  • no-store：上面提到浏览器默认会将请求内容和响应头信息同时缓存，如果配置了这个字段表示浏览器不会缓存任何这次请求的内容，也就是每次请求都需要向服务器发起，如果不是更新频繁的资源不建议使用，可能会影响资源加载速度
  • public：现在大型网站都会通过使用代理服务器实现负载均衡，所以我们请求的资源一般也是先经过代理服务器之后再发送到客户端；所以配置了这个值的含义就是请求的资源不仅可以在本地浏览器缓存，同时也可以再代理服务器缓存
  • private：cache-control的默认取值，与public相对应，表示资源仅能在本地浏览器缓存

 通过上面的学习了解了缓存的机制，了解了最开始我们项目存在的问题，主要是没有配置过缓存导致浏览器使用默认的缓存机制导致的，因为我们的代理服务器使用的nginx，所以在nginx中配置cache-control：no-cache；即可解决上面的问题，不过最令人激动的还是通过工作中的遇到问题学到了新知识。