浏览器缓存机制

缓存位置

缓存位置分为四种，并有如下优先级，当依次查找缓存且没有命中的时候，才会去请求网络

1. service Worker
2. Memory Cache
3. Disk Cache
4. Push Cache
5. 网络请求

Service Worker

Service Worker是运行在浏览器背后的独立线程，一般可以用于实现缓存。使用service worker，传输协议必须为HTTPS。因为service worker 中涉及到请求拦截。

Service Worker 实现缓存一般有三步:(1)首先注册Service Worker，(2)然后监听到insatll事件后就可以缓存需要的文件，(3)在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，若存在直接读取，否则就去请求数据，步骤如下：

// index.js
if(navigator.serviceWorker){
  navigator.serviceWorker
  .register('sw.js')
  .then(function(registration){
    console.log('service worker注册成功')
  })
  .catch(function(err){
    console.log('注册失败')
  })
}
// sw.js
// 监听install事件，回调中缓存所需文件
self.addEventListener('install',e=>{
  e.waitUntill(
    caches.open('may-cache').then(function(cache){
      return cache.addAll(['./index.html','./index.js'])
    })
  )
})
// 拦截所有请求事件
// 如果缓存中已经有数据就直接用缓存，否则去请求数据
self.addEventListner('fetch',e =>{
  e.respondWith(
    caches.match(e.request).then(function(response){
      if(response){
        return response
      }
    })
  )
})

‍

看控制台

在cache中也可以发现我们所需的文件已被缓存

当刷新页面后发现缓存的数据从Service Worker中读取

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

如果我们没有在Service Worker命中缓存，会根据缓存查找优先级去查找数据。但是不管我们是在Memory Cache中还是从网络请求中获取的数据，浏览器都会显示我们是从Service Worker中获取的内容。

Memory Cache

Memory cache也就是内存中的缓存，读取内存中的数据肯定比磁盘块。但是缓存持续性短，会随着进程的释放而释放。一旦我们关闭Tab页面，内存中的缓存也就被释放了。

当我们访问过页面以后，再次刷新页面，发现很多数据都来自于内存缓存

但是内存的容量比硬盘小得多，操作系统需要精打细算内存的使用，所以能让我们使用的内存必然不多。

Disk Cache

Disk cache指存储在硬盘中的缓存，读取速度慢一点，相比memory cache胜在容量和时效性上。

在所有浏览器缓存中，Disk Cache覆盖面基本是最大的。他会根据HTTP Header中的字段判断哪些资源需要缓存，哪些不需要请求直接使用，哪些已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。

Push Cache

Push cache是HTTP/2中的内容，当以上三种缓存都没有命中时，他才会被使用。并且缓存时间很短暂，只在回话（Session）中存在，一旦回话结束就被释放。

• 所有资源都能被推送，但是Edge和safari兼容性不太好
• 可以推送no-cache和no-store的资源
• 一旦连接被关闭，Push Cache就被释放
• 多页面可以使用相同的HTTP/2连接，也就是说能使用相同的缓存
• Push cache中的缓存只能被使用一次
• 浏览器可以拒绝接受已经存在的资源推送
• 你可以给其他域名推送资源

缓存策略

通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置HTTP Header来实现的。

强缓存

强缓存可以通过设置两种HTTP Header实现：Expires 和 Cache-Control。强缓存表示在缓存期间不需要请求，state code 为200。

Expires

Expires: Wed, 22 Oct 2018 08:41:00 GMT

Expires是HTTP/1的产物，表示资源会在那个时间后过期，需要再次请求。并且Expires受限于本地时间，如果修改了本地时间，可能会造成缓存失效。

Cache-Control

Cache-control: max-age=30

Cache-Control出现在HTTP/1.1，优先级高于Expires。该属性值表示资源会在30秒后过期，需要再次请求。

Cache-Control可以在请求头或者响应头中设置，并且可以结合使用多种指令

协商缓存

如果缓存过期了，就需要发起请求验证资源是否有更新。协商缓存可以通过设置两个HTTP Header实现：Last-Modified 和Etag

当浏览器发起请求验证资源时，如果资源没有做修改，那么服务端就会返回304状态码，并且更新浏览器缓存有效期。

Last-Modified 和If-Modified-Since

Last-Modified表示本地文件最后修改日期，If-Modified-Since会将Last-Modified的值发给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来，否则返回304状态码。

但是Last-Modified存在一些弊端：

• 如果本地打开缓存文件，即使没做修改，也会改变Last-Modified的时间，所以导致服务器不能命中缓存发送同样的内容
• 因为Last-Modifed是按照秒进行计算的，颗粒度太大了，如果在极快的时间内进行文件修改，那么会导致资源还是会被命中，不会返回正确资源

所以出现了ETag

ETag和If-None-Match

ETag相当于文件指纹，if-none-match会将当前的Etag发送给服务器，询问该资源ETag有没有变化，有变动的话就将新的资源发送回来。并且ETag优先级比Last-Modified高。

那么如果没设置任何缓存策略，浏览器会怎么处理？

这时，浏览器会采用一个启发式的算法，通常会取响应头中的Date减去Last-Modified值的10%作为缓存时间。

如何设置缓存策略

频繁变动的资源

首先需要使用Cache-Control: no-cache使浏览器每次都请求资源，然后配合Etag或者Last-Modified来验证资源是够有效。这样虽然不能节省请求次数，但是减少相应数据大小。

频繁变动的资源

这里指除了HTML外的代码文件，因为HMTL文件一般不缓存或者缓存时间很短。

那么我们可以对文件名进行hash处理，只要当代码修改后才会生成新的文件名。所以我们可以给文件设置缓存有效期一年 Cache-Control:max=age=31536000，这样只有当HTML文件引用的文件名变化了，就会下载最新文件，否则一年内一直缓存。

每张故作坚强的笑脸背后，是怎样风雨漂泊的一生---Lin