浏览器缓存策略

本文最后更新于:2021年9月24日 下午

强缓存

浏览器在本地验证资源是否过期,如果没过期直接使用本地缓存,并返回200和显示(from memory cache / from disk cache)(根据内存空闲情况和资源类型,并且memory cache页面关闭后会清理,下次加载是从disk cache)

强缓存字段

Expires

  • http 1.0
  • 时间戳格式Expires: Wed, 22 Oct 2018 08:41:00 GMT
  • ⚠️使用本地时间验证,与服务器时间之间的误差或者本地时间的修改都后会造成缓存失效

Cache-control

  • http 1.1
  • 可选参数:
    • public,private
      • public 表示该资源可以被所有客户端和代理服务器缓存
      • private 表示该资源仅能客户端缓存[默认值]
    • max-age相对资源首次被请求的时间
      • 单位为毫秒,表示多长时间后过期
      • 可设置为 0 立即请求新资源
    • s-maxage 会在public字段生效时覆盖Expiresmax-age
    • no-cache,no-store
      • no-cache 会缓存资源,但要协商缓存验证
      • no-store 不缓存
    • max-age=0 || no-cache会进入协商缓存

Pragma

  • 只为了兼容http1.0
  • Pragma = no-cacheCache-Control: no-cache效果一致

优先级

Cache-Control -> Expires

协商缓存

浏览器携带缓存标识向服务器发起请求,询问服务器缓存有效性,协商缓存生效,返回304Not Modified,协商缓存失效,返回200和请求结果

协商缓存字段

Last-modified + If-Modified-Since

  • 服务器返回资源的同时在response header中添加 Last-Modified字段,值是该资源在服务器上的最后修改时间
    Last-Modified: Fri, 22 Jul 2016 01:47:00 GMT

  • 再次请求该资源时,浏览器检测到资源中存在 Last-Modified字段,则会将这个时间戳作为If-Modified-Since的值加入请求头中发送给服务器

  • 服务器根据自身资源的修改时间和来自请求的时间戳判断资源是否更新,返回相对应的结果

缺点

  • 本地打开缓存文件,即使没有对文件进行修改,但还是会造成 Last-Modified 被修改
  • Last-Modified 只能以秒计时,如果在不可感知的时间内修改完成文件,则不能体现被修改过

ETag + If-Not-Match

  • 服务器为资源进行hash计算生成唯一的标识符Etag加入返回头,资源的修改会导致标识改变

  • 浏览器请求时将资源自带的标识作为If-None-Match的值加入请求头中发送给服务器

  • 服务器根据同一资源标识是否一致返回相应结果

  • ETag:\W 弱验证: 新旧资源不需要逐字节一一对应新旧资源的比较会使用较为宽松的算法

  • If-Match条件请求: 在请求方法为 GET 和 HEAD 的情况下,服务器仅在请求的资源匹配该ETag值时才会返回资源。而对于 PUT 或其他非安全方法来说,只有在满足条件的情况下才可以将数据上传。例如:Range请求 or 避免更新丢失(用户上传覆盖其他用户提交的更新)

    缓存策略

  1. 先判断Cache-Control,在Cache-Controlmax-age之内,直接返回200 from cache

  2. 没有Cache-Control再判断Expires,在Expires之内,直接返回200 from cache

  3. Cache-Control=no-cache/no-store或者不符合Expires,浏览器向服务器发送请求

  4. 服务器判断If-Modified-SinceIf-None-Match,两者同时出现时会忽略If-Modified-Since,有效则返回304,失效则返回新资源。

用户行为的影响

  1. 地址栏访问,链接跳转是正常用户行为,将会触发浏览器缓存机制;
  2. F5刷新,进行协商缓存判断;
  3. ctrl+F5刷新,指定强缓存和协商缓存都失效。

浏览器缓存策略
http://yoursite.com/2022/02/24/浏览器缓存策略/
作者
tatekii
发布于
2022年2月24日
许可协议