前端静态资源本地缓存：从秒开到省流量

一、为什么必须做静态资源本地缓存？

性能数据对比：

核心价值：

1. 加载速度提升：二次访问加载耗时降低 80%
2. 带宽成本节约：CDN 流量费用减少 40%
3. 离线可用性：弱网环境下仍可正常展示页面
4. 服务器减压：减少 50%以上静态资源请求

二、六大本地缓存方案实战详解

1. HTTP 强缓存 - 最基础的浏览器级缓存

# Nginx配置 (缓存JS/CSS 30天)
location ~* \.(js|css)$ {
    add_header Cache-Control "public, max-age=2592000";
    etag on;
}

特性：

• 生效位置：浏览器内存/磁盘
• 最佳场景：公共库（jQuery/Vue 等）
• 避坑指南：
  • 文件更新时需修改文件名（如 main.a1b2c3.js）
  • 通过 v=20230713 参数强制更新

2. Cache API - PWA 离线应用利器

// Service Worker中缓存核心资源
self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open("v1").then((cache) => {
      return cache.addAll([
        "/styles/main.css",
        "/scripts/app.js",
        "/images/logo.webp",
      ]);
    })
  );
});

性能表现：

• 缓存命中率：98%
• 加载速度：<300ms（弱网环境）

3. localStorage - 小资源快速存取

// 缓存字体图标（Base64编码）
const cacheIcon = (key, svg) => {
  if (!localStorage.getItem(key)) {
    localStorage.setItem(key, btoa(svg));
  }
  return `data:image/svg+xml;base64,${localStorage.getItem(key)}`;
};

// 使用案例
document.getElementById("icon").src = cacheIcon("home-icon", "<svg>...</svg>");

适用边界：

✅ 小型 SVG 图标（<10KB）
⛔️ 图片/视频等大型资源

4. IndexedDB - 大型资源存储王者

// 缓存PDF文件（支持分片）
const cachePDF = async (pdf) => {
  const db = await idb.openDB("resources");
  const tx = db.transaction("files");

  // 分片存储（每片2MB）
  for (let i = 0; i < pdf.size; i += 2 * 1024 * 1024) {
    const chunk = pdf.slice(i, i + 2 * 1024 * 1024);
    tx.store.put(chunk, `pdf_${i}`);
  }

  await tx.done;
};

容量突破技巧：

• Chrome：单文件最大支持 800MB
• Safari：默认 1GB，可申请扩容
• 分片策略：避免单条记录过大

5. File System API - 未来文件系统级方案

// 创建私有文件系统存储视频
const saveVideo = async (blob) => {
    const root = await navigator.storage.getDirectory();
    const file = await root.getFileHandle('intro.mp4', { create: true });
    const writer = await file.createWritable();
    await writer.write(blob);
    await writer.close();
};

优势对比传统方案：

6. Web Storage 监听 - 实时同步策略

// 跨标签页缓存同步
window.addEventListener("storage", (e) => {
  if (e.key === "theme-config") {
    updateTheme(JSON.parse(e.newValue));
  }
});

// 主标签页修改配置
localStorage.setItem(
  "theme-config",
  JSON.stringify({
    darkMode: true,
  })
);

适用场景：用户配置同步、多窗口状态共享

三、方案选型决策树

黄金选型法则：

1. 静态图片/字体 → HTTP 强缓存 + CDN
2. 用户配置数据 → localStorage + storage 事件
3. SPA 应用资源 → Cache API（Service Worker）
4. 大文件/媒体资源 → IndexedDB 分片存储
5. 专业编辑应用 → File System API 流式读写

四、避坑指南

1. 缓存雪崩问题

场景：所有资源同时到期导致集体回源
解决方案：

// 随机化缓存过期时间
const randomMaxAge = () => {
    const base = 30 * 24 * 3600; // 30天基础
    const rand = Math.floor(Math.random() * 10) * 24 * 3600; // 随机0-10天
    return `max-age=${base + rand}`;
};

// Nginx配置
add_header Cache-Control randomMaxAge();

2. 隐私模式限制

浏览器行为差异：

• Safari 隐私模式：localStorage 配额 1MB
• Chrome 无痕模式：IndexedDB 在标签关闭后销毁 兜底方案：

const safeSet = (key, value) => {
  try {
    localStorage.setItem(key, value);
  } catch (e) {
    // 降级到内存缓存
    window._fallbackCache = window._fallbackCache || {};
    window._fallbackCache[key] = value;
  }
};

3. 缓存版本管理

// 版本冲突检测机制
const CACHE_VERSION = "v2.8";

caches.open(CACHE_VERSION).then((cache) => {
  // 删除旧版本缓存
  caches.keys().then((keys) => {
    keys.forEach((key) => {
      if (key !== CACHE_VERSION) caches.delete(key);
    });
  });
});

五、性能优化进阶方案

混合缓存策略（HTTP + IndexedDB）

优势：

• 首屏用 HTTP 缓存快速加载
• 大资源持久化到 IndexedDB 避免重复下载
• 离线时从 IndexedDB 提供后备资源

智能预加载策略

// 视口内资源优先缓存
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      cacheResource(entry.target.src);
    }
  });
});

document.querySelectorAll("[data-preload]").forEach((el) => {
  observer.observe(el);
});

六、效果验证与监控

性能指标采集：

// 缓存命中率统计
const reportCacheHit = () => {
  const perf = window.performance.getEntries();
  const cachedResources = perf.filter(
    (r) => r.transferSize === 0 && r.duration > 0
  );

  sendAnalytics({
    hitRate: cachedResources.length / perf.length,
    savedBytes: perf.reduce((sum, r) => sum + r.encodedBodySize, 0),
  });
};

window.addEventListener("load", reportCacheHit);

优化前后对比：

没有任何缓存方案是银弹！生产环境务必实现：

1. 多级降级策略（内存 → localStorage → HTTP）
2. 实时监控报警（缓存命中率 <60%时告警）
3. A/B 测试机制（灰度验证新缓存策略）