强缓存是什么
强缓存指的是新鲜期内的资源访问完全不产生网络请求:浏览器直接使用本地副本,开发者工具里显示来自磁盘或内存缓存。新鲜期由响应里的缓存策略指令决定,只要没过期就不会回源验证。它带来的好处是极低的访问延迟与零带宽消耗,代价是在新鲜期内内容更新对用户不可见——因此长期强缓存必须搭配「内容变了地址也变」的机制,靠改文件名而不是靠改内容来失效。
基本信息
| 命中表现 | 开发者工具显示来自磁盘或内存缓存,没有网络请求 |
|---|---|
| 新鲜度判定 | 由响应中的缓存策略指令决定 |
| 共享缓存 | 另有专门指令只作用于中间节点,优先级更高 |
| 失效方式 | 依赖地址变化,而不是修改内容 |
| 代价 | 新鲜期内内容更新不可见 |
典型使用场景
- 带指纹的静态资源:脚本、样式、字体等,发布靠改文件名失效
- 图片与媒体资源:内容很少变化,适合长期缓存
- 接口中的稳定数据:字典项、配置项等几乎不变的数据
- 离线优先的应用:希望二次打开几乎瞬时完成
- 降低源站压力:把重复访问全部挡在浏览器本地
指纹加长期缓存的标准组合
指纹加长期缓存的标准组合
入口页面; 每次都回源验证 # 保证用户及时拿到新版本
带哈希的脚本与样式; 缓存一年并声明内容不变 # 发布时文件名变化即天然失效
# 发布流程:改文件名、先上传静态资源、最后更新入口页面引用与协商缓存的区别
| 对比项 | 强缓存 | 协商缓存 |
|---|---|---|
| 是否发请求 | 不发,直接用本地副本 | 发请求验证,通常只交换头部 |
| 失效依据 | 新鲜期是否过期 | 资源版本是否变化 |
| 适合内容 | 长期不变或带指纹的资源 | 入口页面与变化不频繁的接口 |
| 带宽消耗 | 最低 | 很低 |
排查要点
- 内容更新后用户仍看到旧版本,先确认该资源是否被长期强缓存记住
- 开发者工具的尺寸列显示来自缓存时不会有网络请求,这与协商缓存的未修改状态完全不同
- 发布顺序要正确:静态资源先上传,入口页面最后更新,否则用户可能拿到新入口配旧资源
现代前端的标准组合是入口页面走协商缓存、带指纹的静态资源走长期强缓存:既能让用户及时拿到新版本,又能让大量静态资源完全不走网络,是延迟与新鲜度的最佳平衡点。
给入口页面设置很长的强缓存是常见事故:用户长期拿不到新版本页面,只能靠强制刷新。入口页面的名字不会变,因此不能用改文件名的方式失效,必须走协商缓存。