浏览器缓存策略

bonibabi
266 阅读1分钟

强缓存 200 (from cache）

  • Cache-Control、Expires

    • Cache control （http1.1）权重高，取值：
      1. max-age=60 缓存时间，单位秒
      2. no-cache 每次请求都会发到服务器，进行缓存过期验证，服务器返回304
      3. no-store 每次请求头和相应结果都不会被缓存
      4. public 客户端和中间代理（cdn）都将缓存
      5. private 只在客户端缓存
      6. must-revalidate 在用旧资源时，需要先验证是否过期
    • Expires （http1.0）权重低，过期时间
      • Expires: Wed, 21 Oct 2015 07:28:00 GMT

协商缓存 304

  • Last-Modified If-Modified-Since

    • http1.0 参数，记录文件最后的修改时间，精确到秒，缺点：如果1s内修改文件无法拿到最新；优点：耗时短
    • 首次 response 响应头中带 last-modified
    • 再次 request 请求头中带 If-modified-since

  • ETag If-None-Match

    • http1.1新增header参数，将文件生成md5值，缺点：耗时久；优点：有变更就会获取最新，避免时间问题
    • 首次 response 响应头中带 etag
    • 再次 request 请求头中带 if-none-match

资源访问流程图

Tips:

  1. **from memory cache / from disk cache **
  • memory 存在内存的缓存，空间小
    • preloader、prefetch eg: <link rel="prefetch">
    • 内存缓存不看 cache-control，资源匹配要校验 url content-type cors 等。
  • disk 存在硬盘的缓存，空间大
    • 根据 header 判断哪些缓存
  1. 如果什么缓存策略都没设置，那么浏览器会怎么处理？

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

参考文献：

avatar
文章
阅读
粉丝