JS `Service Worker` 缓存策略：`Cache First`, `Network First` 与 `Stale While Revalidate`

各位前端的英雄好汉，大家好！我是你们的老朋友，BUG终结者，今天咱们来聊聊Service Worker缓存策略这三剑客：Cache First, Network First, 和 Stale While Revalidate。别害怕，虽然名字听起来高大上，但其实它们都是很实在的家伙，能帮你把网页速度提升到飞起，让用户体验嗖嗖上升。

咱们今天就用大白话 + 实际代码，把这三位老哥给安排明白了。

开场白：为啥要用 Service Worker 缓存策略？

想象一下，你打开一个网页，结果半天刷不出来，转啊转啊转得你头都晕了。这种感觉是不是很糟糕？Service Worker就是来拯救你的！它就像一个默默守护在你浏览器背后的小助手，帮你把网页资源缓存起来，下次再访问的时候，直接从缓存里拿，速度快得像闪电。

更重要的是，Service Worker 还能实现离线访问！就算没网，也能让用户看到一些内容，避免出现冷冰冰的“无法连接到互联网”的提示。

第一位英雄：Cache First (缓存优先)

Cache First 策略就像一个守财奴，先看看自己的“小金库”（缓存）里有没有东西，有的话直接拿出来用，根本不理会网络。只有当缓存里没有的时候，才会乖乖地去网络请求。

优点：

速度快： 直接从缓存读取，速度飞快。
离线可用： 即使没有网络，也能访问已经缓存的资源。

缺点：

更新不及时： 如果服务器上的资源更新了，用户可能仍然看到的是旧版本，直到缓存过期。

代码示例：

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 缓存命中
        if (response) {
          console.log('Cache First: 从缓存中获取资源', event.request.url);
          return response;
        }

        // 缓存未命中，发起网络请求
        console.log('Cache First: 缓存未命中，发起网络请求', event.request.url);
        return fetch(event.request);
      }
    )
  );
});

代码解读：

self.addEventListener('fetch', event => { ... });：监听浏览器的 fetch 事件，当浏览器发起请求时，Service Worker 就会被激活。
caches.match(event.request)：尝试在缓存中查找与当前请求匹配的资源。
.then(response => { ... });：如果缓存命中，response 就是缓存中的资源，直接返回。
fetch(event.request)：如果缓存未命中，就发起网络请求，获取资源。

适用场景：

静态资源，例如 CSS、JavaScript、图片等，这些资源通常不会频繁更新。
对性能要求极高的场景，例如游戏。

举个栗子：

你的网站有一个 logo 图片，你就可以使用 Cache First 策略来缓存这个图片。这样，用户每次访问你的网站，logo 都会瞬间加载出来，用户体验蹭蹭上涨。

第二位英雄：Network First (网络优先)

Network First 策略就像一个强迫症，总是想从网络上获取最新的数据。它会先尝试从网络请求资源，如果成功了，就返回网络资源，并且把这个资源存到缓存里。如果网络请求失败了（例如没网），才会退而求其次，从缓存里拿。

优点：

保证数据最新： 总是尝试从网络获取最新数据。

缺点：

速度稍慢： 需要等待网络请求完成，才能返回数据。
离线体验差： 如果没有网络，并且缓存中也没有相应的资源，就会显示错误。

代码示例：

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        // 网络请求成功，将资源存入缓存
        const cacheCopy = response.clone();
        caches.open('my-cache')
          .then(cache => {
            cache.put(event.request, cacheCopy);
          });
        console.log('Network First: 网络请求成功，返回资源并缓存', event.request.url);
        return response;
      })
      .catch(error => {
        // 网络请求失败，从缓存中获取资源
        console.log('Network First: 网络请求失败，从缓存中获取资源', event.request.url);
        return caches.match(event.request);
      })
  );
});

代码解读：

fetch(event.request)：发起网络请求。
.then(response => { ... });：如果网络请求成功，response 就是网络返回的资源。
response.clone()：克隆一份 response，因为 response 只能被读取一次。
caches.open('my-cache')：打开名为 my-cache 的缓存。
cache.put(event.request, cacheCopy)：将克隆的 response 存入缓存。
.catch(error => { ... });：如果网络请求失败，进入 catch 块。
caches.match(event.request)：尝试从缓存中查找与当前请求匹配的资源。

适用场景：

需要保证数据最新的场景，例如新闻网站、股票行情等。
对离线体验要求不高的场景。

举个栗子：

你的网站有一个新闻列表，你需要保证用户看到的是最新的新闻，就可以使用 Network First 策略。

第三位英雄：Stale While Revalidate (过时内容先显示，同时后台更新)

Stale While Revalidate 策略就像一个老好人，它会先从缓存里拿东西显示给用户，同时在后台发起网络请求，更新缓存。这样用户可以很快地看到内容，并且在下次访问的时候，就能看到最新的内容。

优点：

速度快： 先从缓存读取，速度很快。
数据更新及时： 后台更新缓存，保证下次访问时数据最新。

缺点：

用户可能看到过时的数据： 在后台更新完成之前，用户看到的是缓存中的旧数据。

代码示例：

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 缓存命中，先返回缓存中的资源
        const fetchPromise = fetch(event.request)
          .then(networkResponse => {
            // 网络请求成功，更新缓存
            caches.open('my-cache')
              .then(cache => {
                cache.put(event.request, networkResponse.clone());
                return networkResponse;
              });
          });
        console.log('Stale While Revalidate: 先返回缓存，后台更新', event.request.url);
        return response || fetchPromise; // 如果缓存没有，就直接返回网络请求的结果
      })
  );
});

代码解读：

caches.match(event.request)：尝试在缓存中查找与当前请求匹配的资源。
.then(response => { ... });：如果缓存命中，response 就是缓存中的资源。
fetch(event.request)：发起网络请求，在后台更新缓存。
response || fetchPromise：如果缓存命中，返回缓存资源；如果缓存未命中，返回网络请求的结果。

适用场景：

对速度和数据更新都有一定要求的场景。
允许用户在短时间内看到过时数据的场景。

举个栗子：

你的网站有一个商品列表，你可以使用 Stale While Revalidate 策略。这样，用户可以很快地看到商品列表，同时后台会更新缓存，保证用户下次访问时看到的是最新的商品。

策略对比表格：

策略	优点	缺点	适用场景
Cache First	速度快，离线可用	更新不及时	静态资源（CSS、JavaScript、图片等），对性能要求极高的场景
Network First	保证数据最新	速度稍慢，离线体验差	需要保证数据最新的场景（新闻网站、股票行情等），对离线体验要求不高的场景
Stale While Revalidate	速度快，数据更新及时	用户可能看到过时的数据	对速度和数据更新都有一定要求的场景，允许用户在短时间内看到过时数据的场景

选择哪个策略？

选择哪个策略取决于你的具体需求。没有万能的策略，只有最适合你的策略。

如果你的网站有很多静态资源，并且对速度要求极高，那么 Cache First 是一个不错的选择。
如果你的网站需要保证数据最新，并且对离线体验要求不高，那么 Network First 是一个不错的选择。
如果你的网站对速度和数据更新都有一定要求，并且允许用户在短时间内看到过时数据，那么 Stale While Revalidate 是一个不错的选择。

最佳实践：

合理设置缓存过期时间： 避免缓存时间过长，导致用户一直看到旧数据。
使用版本控制： 当资源更新时，修改资源的版本号，强制浏览器更新缓存。
监控缓存命中率： 了解缓存的使用情况，优化缓存策略。
使用 Workbox： Workbox 是 Google 提供的 Service Worker 工具库，可以简化 Service Worker 的开发。

总结：

Service Worker 缓存策略是提升网页性能和改善用户体验的利器。Cache First, Network First, 和 Stale While Revalidate 是三种常用的策略，各有优缺点。选择哪个策略取决于你的具体需求。希望今天的分享能帮助你更好地理解和使用 Service Worker 缓存策略，让你的网站速度飞起来！

记住，没有最好的策略，只有最适合你的策略。多尝试，多实践，你也能成为 Service Worker 大师！

今天的讲座就到这里，感谢各位的聆听，祝大家写代码不报错，上线不背锅！下次再见！

发表回复 取消回复

发表回复取消回复