浏览器缓存机制

浏览器缓存

就是把一个已经请求过的web资源（如html页面，图片，JS，数据）拷贝一份放在浏览器中。缓存会根据进来的请求保存输入内容的副本。当下一个请求到来的时候，如果是相同的URL，浏览器会根据缓存机制决定是直接使用副本响应访问请求还是向源服务器再次发起请求。

• 减少网络带宽消耗

• 降低服务器压力

• 减少网络延迟

1、缓存机制

浏览器的缓存来讲，这些规则是在HTTP协议头部和HTML页面的Meta标签中定义的。他们分别从新鲜度和校验值两个维度来规定浏览器是否可以直接使用缓存中的副本，还是需要去源服务器获取新版本。

• 过期机制：指的是缓存副本的有效期。一个缓存的副本必须满足以下条件，浏览器会认为它是有效的：

  • 含有完整的过期时间控制头信息（HTTP协议报头），并且仍在有效期内
  • 浏览器已经使用过这个缓存的副本，并且会在一个会话中已经检查过新鲜度(即服务器上的资源是否发生改变)
  • 满足以上两种情况的一种，浏览器会直接从缓存中获取副本进行渲染

• 校验值（验证机制）：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag(Entity Tag),它可以用来作为浏览器再次请求过程中的校验标识，如果发现校验标识不匹配，说明资源已经被修改或者过期，浏览器需要重新获取资源内容。

2、缓存位置

• Service Worker
  • 是运行在浏览器背后的独立线程，传输协议必须为 HTTPS；
  • 首先需要先注册 Service Worker，然后监听到 install 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。
• Memory Cache
  • 内存中的缓存，持续性很短，会随着进程的释放而释放。 一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。
• Disk Cache
  • 存储在硬盘中的缓存，读取速度慢点，胜在容量和存储时效性上。
  • 根据 HTTP Herder 中的字段判断哪些资源需要缓存。
  • 对于大文件，大概率是不存储在内存中的，反之优先；系统内存使用率高的话，文件优先存储进硬盘。
• Push Cache
  • 推送缓存，是 HTTP/2 中的内容，三种缓存都没有命中时，它才会被使用。
  • 只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右。

3、缓存控制

<meta http-equiv="Pragma" content="no-cache"> <!-- 通过meta标签进行控制 -->

• 新鲜度

  • 响应头：

    • Pragma：http1.0/仅IE有效；值为：

      • no-cache：忽略浏览器缓存副本，每次均去服务器拉取资源；

    • Expires：http1.0；值为：

      • Mon,15 Aug 2021 13:23:34 GMT：缓存过期时间，没过此时间不发起请求返回缓存副本；

        • 为服务端时间，与客户端时间可能不一致，导致缓存时间没什么意义，故HTTP1.1中，使用cache-control代替。

    • Cache-control：http1.1；值为：

      • no-cache：忽略浏览器缓存副本，每次均去服务器经过协商缓存来验证决定是否使用缓存；
      • no-store：任何情况下均不要缓存任何副本；
      • max-age=[秒]：缓存副本的有效时长；
      • public：任何路径的缓存者（浏览器、代理服务器），可无条件缓存改资源。
      • private：所有内容只有客户端可以缓存，Cache-Control的默认取值。
      • s-maxage（单位为s)：同max-age作用一样，只在代理服务器中生效（比如CDN缓存）。

    • Last-Modified：http1.1；值为：

      • Mon,15 Aug 2021 13:23:34 GMT：资源最后修改的时间，只能精确到秒级。

  • 请求头：

    • if-Modified-Since：http1.1；值为：
      • 上次响应头的Last-Modified值，再次请求资源时，请求头带上此字段，后端服务与资源最后修改时间比对，若修改过，则返回资源与新的Last-Modified值，状态码200；否则返回304，继续使用缓存副本。

• 校验值：

  • 响应头：
    • Etag；http1.1；值为：
      • “fsdjfkwejfw324krj2jl3rjl23”：资源在服务器的唯一标识符，生成规则由服务端定义；当资源改变时，Etag值也会发生改变。
  • 请求头：
    • if-None-Match；http1.1；值为：
      • 当资源过期时，如果资源具有Etag声明，则再次请求时，headers添加此字段，值为Etag值，服务端与被请求资源的相应校验串进行比对，决定返回200还是304；

• 强制缓存：Cache-Control与Expires；其作用一致，但前者选择多，控制细致，同时设置时，其优先级高于Expires；

• 协商缓存：Last-Modified/Etag；优先级低于强制缓存，只有过期后才会发送携带此字段值的请求；一般情况下两者配合使用，能够很好的利用304，从而减少响应开销。

  • ETag优先级高于Last-Modified，且其精确度更高；
  • Last-Modified只能精确到秒级，当1s内修改N次，将无法判断；