浏览器缓存策略

2020-10-17 00:01 前端米乐

图片


强缓存 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:

    • 内存缓存不看 cache-control,资源匹配要校验 url content-type cors 等。


  • disk 存在硬盘的缓存,空间大

    • 根据 header 判断哪些进行缓存

    2. 如果什么缓存策略都没设置,那么浏览器会怎么处理?
:浏览器会采用一个启发式的算法,通常会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间。

本文章转载自公众号:ddbeipiao

首页 - 前端 相关的更多文章: