介绍

# 介绍

静态资源(js css img),一旦上线基本就不会变的

# 强制缓存

# Expires

  1. 在 Response Headers 中
  2. 同为控制缓存过期
  3. 已被 Cache-Control 代替

# Cache-Control

  1. Response Headers 中
  2. 控制强制缓存的逻辑
  3. 例如 Cache-Control: max-age=3153600(单位是 s) 控制这个文件被缓存一年
  • max-age
  • no-cache, 不用本地缓存,去服务器请求,服务器怎么缓存我们不管
  • no-store, 不仅不用本地缓存,也不用服务器的一些缓存措施
  • private
  • public
强制缓存

# 协商缓存

  1. 服务端缓存策略
  2. 服务器判断客户端资源,是否和服务端资源一样
  3. 一致则返回 304,否则返回 200 和最新的资源
  4. 在 Response Headers 中,有两种

# Last-Modified

  • Last-Modified 资源的最后修改时间
last-modified

# Etag

  • Etag 资源的唯一标识(一个学符串,类似人类的指纹)

  • 会优先使用 Etag,Last-Modified 只能精确到秒级,如果资源被重复生成,而内容不变,则 Etag 更精确

Etag

# 缓存综述

缓存综述

# 刷新操作

  1. 正常操作:地址栏输入 url,跳转链接,前进后退等
  • 正常操作:强制缓存有效,协商缓存有效
  1. 手动刷新:F5 ,点击刷新按钮,右击菜单刷新
  • 手动刷新:强制缓存失效,协商缓存有效
  1. 强制刷新:ctrl + F5
  • 强制刷新:强制缓存失效,协商缓存失效