5分钟搞懂 强缓存与协商缓存

Ⅰ、http缓存

  • HTTP 缓存策略 分为 => 强制缓存协商缓存

  • 为什么需要 HTTP 缓存 呢 ?

  • 直接使用缓存速度 >> 远比重新请求快

  • 缓存对象有那些呢 ?

  • 图片 JS文件 CSS文件 等等

    文章目录

        • Ⅰ、http缓存
          • Ⅱ、强缓存
          • Ⅲ、协商缓存

Ⅱ、强缓存

5分钟搞懂 强缓存与协商缓存_第1张图片

  • 强制缓存 依赖于 Response Header 中的Cache-Control属性
  • Cache-Control 属性值有两种 :no-cachemax-age= xxx

① 属性为no-cache 时 表示不需要 强制缓存 , 每次需要重新调接口 ;


② 属性为max-age= xxx 时 表示需要 强制缓存 , 缓存时长为 xxx 秒,超过时长需要重新请求 ;

在这里插入图片描述


Ⅲ、协商缓存

  • 协商缓存,则需要判断第再次请求以后,数据是否更新?

数据发生更新 : 返回 状态码 200 , 返回最新数据,取最新数据

数据未发生更新 : 返回 状态码 304 , 取缓存数据

  • 协商缓存 ,存在 2 中形式

第Ⅰ种形式 ,涉及参数

  • Last-Modified :资源最后更新时间;
  • If-Modified-Since : 传递给服务端的参数 ,判断与最新资源更新时间比较

相等 => 返回 304不相等 => 重新设置 Last-Modified ,返回 200 获取最新数据;

5分钟搞懂 强缓存与协商缓存_第2张图片

第Ⅱ种形式 ,涉及参数

  • Etag :内容唯一标识符
  • if-none-match :用来判断是否服务端的 Etag 是否相同
    5分钟搞懂 强缓存与协商缓存_第3张图片

两种形式的区别

  • 判断过程 两种是 相同的,
  • 不同点在于 Etag 可以精确到 毫秒 , 而 Last-Modified 只能判断秒级别的
  • 更推荐 第二种形式

在这里插入图片描述

你可能感兴趣的:(缓存,前端,javascript)