JavaScript Academy · 课时

缓存策略

Q: 「缓存策略」这节课中我会学到什么？

应用缓存优先和网络优先模式。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

应用缓存优先和网络优先模式。

缓存策略 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

为什么缓存策略很重要

不同资源需要不同的处理方式。徽标可以永久从缓存提供；API 数据流则必须保持最新。缓存策略决定先尝试缓存还是网络，以及如何将两者结合起来。

缓存优先

缓存优先：先检查缓存；如果找到，就返回缓存中的内容；否则从网络获取。它非常适合字体、CSS 和图片等静态且很少变化的资源。

async function cacheFirst(request) {
  const cached = await caches.match(request);
  return cached || fetch(request);
}

带回退缓存的缓存优先

缓存未命中时，您可以获取结果并同时存储结果，这样下次请求就会更快。用户浏览时，缓存会以延迟方式逐步预热。

async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;
  const fresh = await fetch(request);
  const cache = await caches.open('runtime');
  cache.put(request, fresh.clone());
  return fresh;
}

网络优先

网络优先：先尝试网络；如果成功，就使用并缓存结果；如果失败（处于离线状态），则回退到缓存。它最适合新闻或仪表板等经常更新的内容。

async function networkFirst(request) {
  try {
    const fresh = await fetch(request);
    const cache = await caches.open('runtime');
    cache.put(request, fresh.clone());
    return fresh;
  } catch (err) {
    return caches.match(request);
  }
}

陈旧时重新验证

陈旧时重新验证：为提高速度立即返回缓存副本，同时在后台获取新副本以更新缓存，供下次使用。这是在速度与新鲜度之间取得的良好平衡。

async function staleWhileRevalidate(request) {
  const cache = await caches.open('runtime');
  const cached = await cache.match(request);
  const network = fetch(request).then(res => {
    cache.put(request, res.clone());
    return res;
  });
  return cached || network;
}

仅网络和仅缓存

两个简单的极端策略：

仅网络：始终获取，从不缓存（例如分析信标）。
仅缓存：只提供预缓存的资源，从不访问网络（例如应用外壳）。

// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);

按请求类型进行路由

实际应用会为每个请求选择一种策略。在获取处理程序中检查 request.url 或 request.destination，然后据此进行路由。

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(event.request));
  } else {
    event.respondWith(cacheFirst(event.request));
  }
});

处理离线备用方案

当网络和缓存都未命中时，请返回友好的离线页面或占位内容，而不是返回损坏的响应。

async function withOfflineFallback(request) {
  return (await caches.match(request)) ||
         (await caches.match('/offline.html'));
}

只缓存成功的响应

请避免缓存错误。存储之前检查 response.ok（或状态），这样 404 或 500 响应就不会污染缓存。

const fresh = await fetch(request);
if (fresh.ok) {
  cache.put(request, fresh.clone());
}
return fresh;

选择策略

根据内容匹配策略：

静态资源：缓存优先
动态数据：网络优先
混合内容：陈旧时重新验证

大多数应用会通过请求路由组合使用多种策略。

策略回顾

缓存策略让一个服务工作线程能够智能地为整个应用提供服务：静态资源即时可用、动态数据保持新鲜，并为离线情况提供平稳的备用方案，而且这些策略都可以按请求选择。

快速检查

测试您对缓存策略的理解。

回顾

您学习了缓存策略：

静态资源使用缓存优先。
新鲜的动态数据使用网络优先。
速度与新鲜度兼顾时使用陈旧时重新验证。
通过 request.url/destination 按请求进行路由。
只缓存成功的响应，并提供离线备用方案。

接下来将学习后台同步和缓存更新。

常见问题解答

「缓存策略」课时是免费的吗？

是的 — 「缓存策略」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「缓存策略」这节课中我会学到什么？

应用缓存优先和网络优先模式。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「缓存策略」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy