JavaScript缓存核心是存得准、取得快、不过期：内存用Map实现O(1)查找，HTTP协同原生缓存与Service Worker，本地存储按需选localStorage或IndexedDB，并配TTL/LRU失效策略防雪崩。
JavaScript 中实现缓存机制的核心思路是：避免重复计算或重复请求，把已处理过的数据暂存起来，后续直接复用。关键不在于“存得多”，而在于“存得准、取得快、不过期”。
内存缓存：用对象或 Map 快速暂存计算结果
适合纯前端、轻量、生命周期短的场景，比如函数结果缓存（memoization）。
- 用普通对象做键值对缓存时，注意 key 必须是字符串；复杂参数建议用 JSON.stringify 序列化，但需警惕循环引用和属性顺序问题
- 更推荐用 Map，支持任意类型作 key（如函数、对象、Symbol），且保留插入顺序，查找时间复杂度稳定为 O(1)
- 简单示例：防抖 + 缓存的 fetch 封装，相同 URL 在 5 秒内重复调用直接返回缓存 Promise
HTTP 缓存协同：合理设置请求头与 Service Worker
浏览器原生缓存是最省资源的层级，JS 层要配合而非绕过它。
- 发请求时主动带上 Cache-Control、ETag 或 If-None-Match，让服务端决定是否返回 304
- 在 Service Worker 中拦截 fetch，对静态资源或特定 API 响应做持久化缓存（如使用 caches API），支持离线读取
- 注意：不要在每次 fetch 后无条件 put 到 cache，应判断 status === 200 且响应体可读再缓存，避免存错误页
本地存储缓存：localStorage / IndexedDB 的适用边界
适合需要跨会话保留、数据量中等（KB～MB 级）、非敏感的缓存内容。
立即学习“Java免费学习笔记（深入）”；
- localStorage 简单易用，但容量小（通常 5–10MB）、阻塞主线程、只能存字符串；适合存配置、用户偏好、小份 JSON 数据
- IndexedDB 支持结构化数据、事务、大容量（数百 MB）、异步操作；适合缓存列表页数据、离线消息、图片 base64 等
- 务必加版本管理和过期检查：写入时存 timestamp，读取前比对有效期（如 10 分钟），超时则丢弃并重新拉取
缓存失效与更新策略：别让旧数据“赖着不走”
缓存的价值取决于新鲜度，失效机制比缓存本身更重要。
- 主动失效：用户执行编辑、删除等操作后，立刻清除相关 key（如更新用户资料后删掉
user:123缓存） - 被动失效：给每条缓存设 TTL（Time-To-Live），读取时检查是否过期；或采用 LRU 策略自动淘汰最久未用项（可用第三方库如 lru-cache，或自己用 Map + 链表模拟）
- 避免“缓存雪崩”：大量缓存同时过期导致瞬时请求压向后端；可为 TTL 加随机偏移（如 5min ± 30s）
