核心是分清资源类型并设置差异化缓存策略：静态资源用强缓存+文件哈希，动态数据用 localStorage/SessionStorage 加 TTL 控制，离线场景用 Service Worker + Cache API，高频小数据可内存缓存。
核心是分清资源类型，按更新频率和重要性设置不同过期策略。静态资源（如 JS、CSS、图片）应长期缓存，动态数据（如 API 响应）需控制有效期或主动失效。
静态 JavaScript 资源：用 HTTP 缓存头 + 文件哈希名
这类资源内容稳定，适合强缓存一年甚至更久，关键在于避免更新后用户仍用旧缓存。
- 服务端响应头设为：Cache-Control: public, max-age=31536000, immutable —— 浏览器直接复用本地副本，不发请求
- 配合构建工具（如 Webpack/Vite）生成带内容哈希的文件名，例如
app.a1b2c3.js；文件内容变则文件名变，自然绕过旧缓存 - 不要依赖
Expires，它易受客户端时间影响；优先用max-age和immutable
动态接口数据：用 localStorage/SessionStorage + TTL 控制
API 返回的数据常变化，不能靠 HTTP 缓存头硬保，得由 JS 主动管理生命周期。
- 缓存时记录时间戳，读取前校验是否超时，例如 5 分钟内不重复请求同一用户详情
- 敏感或会话级数据用
sessionStorage，关闭标签页即清空，更安全 - 避免无限制写入：每次写入前检查
localStorage使用量，超过阈值可按 LRU 清理旧项
离线与精细控制：Service Worker + Cache API
需要离线支持、版本化缓存或拦截特定请求时，用 Service Worker 管理 Cache API。
立即学习“Java免费学习笔记（深入）”；
- 安装阶段预缓存核心资源（HTML、主 JS、关键 CSS），命名带版本号如
v2-core - fetch 事件中先匹配缓存，未命中再发网络请求，并把新响应存入缓存（可选加 TTL 字段）
- 上线新版本时，通过更新 Service Worker 脚本触发
activate阶段，自动清理旧缓存
内存缓存：高频小数据临时提速
组件内部或单次页面生命周期内反复使用的计算结果、轻量接口响应，适合放内存里。
- 用
Map或对象实现，键为请求参数组合，值为结果 + 时间戳 - 设置默认 TTL（如 60 秒），读取时判断是否过期，过期则丢弃并重新获取
- 切忌缓存大对象或 DOM 节点，防止内存泄漏；页面卸载前建议手动清空
