面试题：JavaScript中Service Worker离线缓存策略优化问题

常见缓存策略

Cache - only：
- 说明：始终从缓存中获取资源，不请求网络。适用于那些基本不会变化的资源，比如站点的logo图片、一些固定的样式文件等。这种策略能提供最快的响应速度，但如果缓存中的资源过旧，用户将无法获取到最新版本。
- 代码示例：

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
    );
});

Network - only：
- 说明：始终从网络获取资源，不使用缓存。适用于实时性要求极高的资源，如最新的股票数据、实时聊天消息等。但如果网络不稳定或不可用，将无法获取资源。
- 代码示例：

self.addEventListener('fetch', function(event) {
    event.respondWith(
        fetch(event.request)
    );
});

Stale - While - Revalidate：
- 说明：先从缓存中返回资源，同时在后台发起网络请求更新缓存。这样能保证用户快速得到响应，同时尽可能获取到最新的资源。适用于大部分静态资源，如CSS、JavaScript文件，这些文件相对稳定，但偶尔也会有更新。
- 代码示例：

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            var fetchPromise = fetch(event.request).then(function(networkResponse) {
                caches.open('your - cache - name').then(function(cache) {
                    cache.put(event.request, networkResponse.clone());
                });
                return networkResponse;
            });
            return response || fetchPromise;
        })
    );
});

Network - First with Cache Fallback：
- 说明：优先尝试从网络获取资源，如果网络请求失败，再从缓存中获取。适用于经常更新但又希望在网络故障时有备用方案的资源，比如HTML文件，因为HTML文件通常会包含最新的页面结构和数据。
- 代码示例：

self.addEventListener('fetch', function(event) {
    event.respondWith(
        fetch(event.request).catch(function() {
            return caches.match(event.request);
        })
    );
});

Cache - First with Network Fallback：
- 说明：先从缓存中获取资源，如果缓存中没有，再从网络获取。适用于缓存命中率较高且网络获取成本较高的资源，例如一些不常更新的图片、字体文件等。
- 代码示例：

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});

根据资源类型选择缓存策略

HTML：
- 推荐策略：Network - First with Cache Fallback。因为HTML通常包含最新的页面内容和结构，优先从网络获取能保证用户看到最新的页面。但在网络故障时，从缓存中获取旧版本的HTML可以至少提供一些页面内容。
CSS：
- 推荐策略：Stale - While - Revalidate。CSS文件相对稳定，从缓存中快速获取可以提高页面加载速度，同时在后台更新缓存能保证在有新样式发布时用户可以及时获取到。
图片：
- 推荐策略：Cache - First with Network Fallback 或者 Cache - only。对于不常更新的图片（如站点的logo、固定的背景图片等），可以使用Cache - only策略以获得最快的加载速度；对于可能会更新的图片，Cache - First with Network Fallback能在保证快速加载的同时，在有新图片时获取到最新版本。

星途面试题库

面试题：JavaScript中Service Worker离线缓存策略优化问题

知识考点

面试题答案

常见缓存策略

根据资源类型选择缓存策略