浏览器缓存机制

对于web应用来说，它是提升页面性能同时减少服务器压力的利器。

• 浏览器缓存过程

  1. 浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把response header及该请求的返回时间一并缓存；
  2. 下一次加载资源时，先比较当前时间和上一次返回200的时间差，没有超过cache-control设置的max-age（如果服务器不支持http1.1,则用expires判断是否过期），则没有过期，命中强缓存，不发送请求直接从本地缓存读取该文件。如果过期，则向服务器发送header带有if-None-Match和if-Modified-Since的请求；
  3. 服务器收到请求后，优先根据Etag的值判断被请求的文件有没有做修改，Etag值一致则没有修改，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回200；
  4. 如果服务器收到的请求没有Etag值，则将if-Modified-Since和被请求文件的最后修改时间做比较，一致则命中协商缓存，返回304；不一致则返回新的last-Modified和文件返回200。

• 浏览器缓存类型分为 ==强缓存== 和 ==协商缓存==

  1. 强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码，并且size显示from disk cache或from memory cache；

     • Expires：response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间之内，则命中强缓存。

     • Cache-Control：当值设为max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，则命中强缓存。

       Expires和Cache-Control: max-age=..的作用是差不多的，区别在于Expires是http1.0的产物，Cache-Control是http1.1的产物，两者共存下，Cache_Control的优先级高于Expires;在某些不支持HTTP1.1的环境下，Expires就会发挥用处。所以Expires其实是过时的产物，现阶段它的存在只是一种兼容性的写法。

       还有一个区别是Expires是一个具体的服务器时间，这就导致一个问题，如果客户端时间和服务器时间相差较大，缓存命中与否就不是开发者所期望的。Cache-Control是一个时间段，控制就比较容易。

  2. 协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；

     • Etag(res)和if-None-Match(req)： Etag是上一次加载资源时，服务器返回的response header，是对该资源的一种唯一标识，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到request header里的if-None-Match里，服务器接收后对比资源文件的Etag值做比较，相同表示资源文件没有发生改变，命中协商缓存。

     • Last-Modified(res)和If-Modified-Since(req)：Last-Modified是该资源文件最后一次更改时间，服务器会在response header里返回，同时浏览器会把这个值保存起来，在下一次请求时，放在request header里的if-Modified-Since里，服务器在接收到后也会做比对，如果相同则命中协商缓存。

       精度上区别：Etag由于Last-Modified。Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；如果是负载均衡的服务器，各个服务器生成的Last-Modified也有可能不一致。

       性能上区别：Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过算法来计算出一个hash值。

       优先级上区别，服务器校验优先考虑Etag

     两者的共同点是，都是从客户端缓存中读取资源；区别是强缓存不会发请求，协商缓存会发请求。

• 缓存位置

  1. Service Worker：是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。因为Service Worker中涉及到请求拦截，所以必须使用HTTPS协议保障安全。

     Service Worker的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存那些文件、如何匹配缓存、如何读取缓存、并且缓存是持续性的。

  2. Memory Cache：Memory Cache也就是内存中的缓存，主要包括的是当前中页面中已经抓取到的资源，例如页面上已经下载的样式、脚本、图片等。读取内存中的数据比磁盘高效，可是缓存持续性很短，会随着进程的释放而释放。一旦我们关闭tab页面，内存中的缓存也就被释放了。

     内存缓存在缓存资源时并不关心返回资源的HTTP缓存头Cache-Control是什么值，同时资源的匹配也并非仅仅是对URL做匹配，还可能会对Content-Type，CORS等其他特征做校验。

  3. Disk Cache：Disk Cache也就是存储在硬盘上的缓存，读取速度慢点，但是什么都能存储到磁盘中，时效性和容量上更好。

     对于大文件来说，大概率是不存储到内存中，反之优先。

     当前系统内存使用率高的话，文件也优先存储到硬盘。

  4. Push Cache：(推送缓存)是HTTP/2中的内容，当以上三中缓存都没有命中时，它才会被使。它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。

     • 所有的资源都能被推送，并且能够被缓存,但是 Edge 和 Safari 浏览器支持相对比较差。
     • 可以推送 no-cache 和 no-store 的资源。
     • 一旦连接被关闭，Push Cache 就被释放。
     • 多个页面可以使用同一个HTTP/2的连接，也就可以使用同一个Push Cache。这主要还是依赖浏览器的实现而定，出于对性能的考虑，有的浏览器会对相同域名但不同的tab标签使用同一个HTTP连接。
     • Push Cache 中的缓存只能被使用一次。
     • 浏览器可以拒绝接受已经存在的资源推送。
     • 你可以给其他域名推送资源。

• 用户行为对浏览器缓存的控制

  1. 地址栏访问，链接跳转是正常用户行为，将会触发浏览器缓存机制；
  2. F5刷新，浏览器会设置max—age=0,跳过强缓存判断，会进行协商缓存判断；
  3. ctrl+F5刷新，跳过强缓存和协商缓存，直接从服务器拉取资源。