关于浏览器缓存一说

000玲
700 阅读3分钟

缓存优先级

以下是按照优先级排序

一、 service Worker

  1. 开发者编写的额外的脚本，缓存位置独立，目前使用不广泛
  2. 它在浏览器上的存储空间在：f12打开调试 -> application -> cache Storage

二、 memory cache

  1. （内存中的缓存）短期存储，不受开发者控制，也不受http协议头的约束
  2. 存储在内存中，读取速度会比较快
  3. 生命周期跟着会话走，一旦浏览器tab关闭，该缓存也会被释放
  4. 页面首次加载时请求回来的数据会被记录到内存缓存中，按住f5刷新时，通过network size列可观察到，它的size显示的： memory cache，且耗时0ms image.png

三、 disk cache （硬盘中的缓存）也叫http cache

持久存储，遵守http协议头中的字段，disk cache 按失效策略可分为以下2个

给个图示：

graph TD
A([浏览器请求资源]) --> B{Expires/Cache-Control}
B{Expires/Cache-Control} --命中强缓存--> C[从缓存读取]
C[从缓存读取] --> J[/浏览器渲染/]
B{Expires/Cache-Control} --不命中,判断协商缓存--> D{Etag/Last-Modified}
D{Etag/Last-Modified} --命中--> E(服务器响应状态码304)
E(服务器响应状态码304) --> J[/浏览器渲染/]
D{Etag/Last-Modified} --不命中--> F(服务器请求)
F(服务器请求) --请求成功,返回状态码200--> J[/浏览器渲染/]

1、 强缓存,命中时,不请求服务器,状态码为200

  1. Expires HTTP 1.0字段,表示缓存到期时间
    • 这里记录的时间是个绝对时间，存在一定的风险，因用户可以更改本机的时间，所以在HTTP/1.1版本中新增了Cache-control
  2. Cache-control `` HTTP/1.1新增字段,表示资源缓存的最大有效时间
    • max-age： 表示缓存的过期时长，单位为秒
    • must-revalidate
    • no-cache：需要注意这里：设置no-cache，资源还是会被缓存，缓存的资源用于在加载页面时，存在两个或者多个同一资源的请求，这个时候就不会重复请求，只请求一次，后面的拿缓存。
    • no-store: 真正的表示强制不缓存
    • public: 所有内容都可被缓存,包括客户端和代理服务器,如CDN
    • private: 所有内容只有客户端才可以缓存,代理服务器不能缓存 如下图，是页面f5刷新后看到的请求，可看到命中强缓存的size显示disk cache，状态码返回200，且Cache-Control里包含了max-age 缓存的最长时间，命中此项缓存机制的请求时间也只需几毫秒; 通过图中显示协议用的是h2,浏览器在http1.1之后新增了Cache-control来代替Expires,因此这里的请求木有Expires项 image.png

2、 对比缓存(协商缓存),命中时,不请求服务器,状态码为304

强缓存失效后,就启用协商缓存,若命中,则http请求返回304状态码,对比缓存有2组字段

  1. Last-Modified & If-Modified-Since
    • Last-Modified: 资源最后一次更新的时间
    • 服务端通过对比Last-Modified 和 If-Modified-Since,若两者相等,响应304,否则响应200
  2. Etag & If-None-Match
    • Etag 由hash生成,存储文件的特殊标志
    • 服务端通过对比Etag 和 If-None-Match,若两者相等,响应304,否则响应200 如下图，可看到命中协商缓存的请求状态码是304，ETag返回的是一段哈希值，Last-Modified是记录最后更新的时间，两者的优先级是 ETag>Last-Modified image.png
avatar
文章
阅读
粉丝