JavaScript虽无内置缓存功能，但可通过HTTP层（响应头控制）、浏览器层（Service Worker）、内存层（Map/TTL）和存储层（localStorage/IndexedDB）四级缓存协同优化性能。
JavaScript 本身不直接提供“缓存”这个功能，但可以通过多种机制在不同层级实现数据或资源的缓存，从而显著提升应用加载速度、减少重复请求、降低服务器压力。关键在于理解缓存发生的层级（HTTP 层、浏览器层、内存层、存储层）并合理组合使用。
利用浏览器 HTTP 缓存（最基础也最有效）
这是前端性能优化的第一道防线，无需写 JavaScript，靠服务端响应头控制，但前端需配合设计资源路径与版本策略：
- 静态资源（JS/CSS/图片）设置 Cache-Control: public, max-age=31536000（一年），配合文件内容哈希命名（如
app.a1b2c3.js），确保更新后 URL 变化，浏览器自动请求新版本 - API 接口可设 Cache-Control: no-cache 或 max-age=60，配合
ETag或Last-Modified实现条件请求，节省带宽 - 避免对动态接口滥用强缓存（如
max-age=3600且无校验），否则用户可能看到过期数据
用 Service Worker 实现离线缓存与精细控制
Service Worker 是运行在浏览器后台的脚本，能拦截网络请求并自定义缓存逻辑，适合 PWA 场景：
- 安装阶段预缓存核心资源（HTML、主 JS、关键 CSS）：
cache.addAll(['/index.html', '/app.js', '/style.css']) - 激活后对后续请求采用“缓存优先 + 网络回退”策略：
event.respondWith(caches.match(event.request).then(r => r || fetch(event.request))) - 支持按 URL 模式、请求方法、响应状态码等条件精细化缓存，例如只缓存 GET 图片请求，跳过 POST 表单提交
内存缓存（in-memory cache）用于高频小数据
适合临时保存计算结果、API 响应片段、组件状态等，生命周期随页面存在：
立即学习“Java免费学习笔记（深入）”；
- 用普通对象或
Map存储键值对，例如：const cache = new Map(); cache.set('user_123', {name: 'Alice', avatar: '...'}); - 添加 TTL（过期时间）：存储时记录时间戳，读取前检查是否超时，或使用
setTimeout自动清理（注意内存泄漏风险） - 搭配防抖/节流使用：比如搜索建议，对相同关键词 300ms 内重复输入不发新请求，直接返回缓存结果
持久化缓存：localStorage / IndexedDB 保存较长期数据
当需要跨会话保留（如用户偏好、离线草稿、大列表分页数据），又不想总调后端时可用：
-
localStorage简单易用，但容量小（通常 5–10MB）、阻塞主线程、只能存字符串；适合存配置类小数据：localStorage.setItem('theme', 'dark') -
IndexedDB是异步、结构化、容量大的客户端数据库；适合缓存 API 列表页数据、用户上传的离线文件元信息等 - 注意同步问题：本地缓存更新后，需在合适时机（如网络恢复、用户主动刷新）同步到服务端，避免脏数据
缓存不是越多越好，关键是选对层级、设好失效策略、监控命中率。一个请求可能同时经过 HTTP 缓存 → Service Worker 缓存 → 内存缓存三层，每层职责分明，才能既快又准。
