Cache API实战总结如何高效利用浏览器缓存提升前端性能
东方雨婷我的写法，亲测靠谱
在前端开发中，Cache API 是一个非常实用的工具，特别是在移动应用和 PWA（Progressive Web App）开发中。它可以帮助我们缓存资源，提高应用的加载速度和离线体验。下面我就分享一下我在使用 Cache API 过程中总结的一些最佳实践。
首先，我一般会把 Cache API 的初始化放在 service worker 里，这样可以确保在应用启动时就准备好缓存策略。下面是一个简单的示例：
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('my-cache-v1').then((cache) => {
return cache.addAll([
'/',
'/styles/main.css',
'/scripts/app.js',
'/images/logo.png'
]);
})
);
});这里我用 caches.open 打开一个名为 my-cache-v1 的缓存，并通过 addAll 方法将需要缓存的资源添加到缓存中。这样做的好处是可以在安装阶段就准备好这些资源，确保用户在第一次访问时就能快速加载。
这几种错误写法，别再踩坑了
虽然上面的代码看起来很简单，但其实有很多细节需要注意。我之前就踩过不少坑，比如：
- 直接在
install事件中使用fetch来获取资源，而不是用addAll方法。 - 没有处理缓存更新的问题，导致用户一直使用旧的缓存数据。
- 没有处理缓存失败的情况，导致应用在某些情况下无法正常运行。
下面我来具体讲讲这些坑。
直接使用 fetch 而不是 addAll
很多人在初始化缓存时喜欢直接使用 fetch 方法来获取资源，然后手动添加到缓存中。这种写法虽然也能实现缓存，但效率较低且容易出错。下面是一个错误的示例：
self.addEventListener('install', (event) => {
event.waitUntil(
Promise.all([
fetch('/'),
fetch('/styles/main.css'),
fetch('/scripts/app.js'),
fetch('/images/logo.png')
]).then((responses) => {
const cache = await caches.open('my-cache-v1');
for (const response of responses) {
cache.put(response.url, response);
}
})
);
});这种写法的缺点在于，如果某个资源获取失败，整个缓存初始化过程就会失败。而且这种方式需要手动管理每个请求的结果，代码复杂度也增加了。
不处理缓存更新
另一个常见的问题是不处理缓存更新。如果应用中的资源发生变化，而缓存中的数据还是旧的，那么用户可能会看到过期的内容。为了解决这个问题，我一般会在 activate 事件中清除旧的缓存，并在 fetch 事件中更新缓存。
下面是一个处理缓存更新的示例：
self.addEventListener('activate', (event) => {
const currentCaches = ['my-cache-v1'];
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cacheName) => {
if (!currentCaches.includes(cacheName)) {
return caches.delete(cacheName);
}
})
);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
if (response) {
return response;
}
return fetch(event.request).then((networkResponse) => {
if (networkResponse && networkResponse.status === 200) {
const cache = await caches.open('my-cache-v1');
cache.put(event.request, networkResponse.clone());
}
return networkResponse;
});
})
);
});这里我先在 activate 事件中删除旧的缓存，然后在 fetch 事件中检查缓存中是否有对应的资源。如果没有，则从网络中获取并更新缓存。
不处理缓存失败的情况
还有一个常见的问题是不处理缓存失败的情况。如果某个资源无法从网络中获取，或者缓存操作失败，应用可能会出现一些不可预知的行为。为了避免这种情况，我一般会在关键的地方加上错误处理逻辑。
下面是一个处理缓存失败的示例：
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
if (response) {
return response;
}
return fetch(event.request).then((networkResponse) => {
if (networkResponse && networkResponse.status === 200) {
const cache = await caches.open('my-cache-v1');
try {
cache.put(event.request, networkResponse.clone());
} catch (error) {
console.error('Failed to cache the response:', error);
}
}
return networkResponse;
}).catch((error) => {
console.error('Fetch failed:', error);
// 返回一个默认的 fallback 页面或其他处理方式
return new Response('<h1>Oops! Something went wrong.</h1>', {
status: 500,
headers: { 'Content-Type': 'text/html' }
});
});
})
);
});这里我在 fetch 事件中加了一些错误处理逻辑，如果网络请求失败或缓存操作失败，我会记录错误信息，并返回一个默认的 fallback 页面。
实际项目中的坑
在实际项目中，使用 Cache API 时还会遇到一些其他的问题。比如：
- 缓存版本控制：如何合理地管理不同版本的缓存，避免缓存冲突。
- 大文件缓存：如何处理大文件（如视频、图片）的缓存，避免内存不足。
- 缓存清理：如何定期清理不再需要的缓存，避免占用过多存储空间。
对于缓存版本控制，我一般会在缓存名称中加入版本号，这样每次更新应用时，只需更改版本号即可。例如：
const CACHE_NAME = 'my-cache-v2';对于大文件缓存，我建议不要一次性缓存太多大文件，而是根据用户的实际需求进行缓存。如果确实需要缓存大文件，可以考虑使用 CacheStorage 的 put 方法分块缓存。
对于缓存清理，我一般会在 activate 事件中检查缓存的大小，并删除不必要的缓存。例如：
self.addEventListener('activate', (event) => {
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cacheName) => {
if (cacheName !== CACHE_NAME) {
return caches.delete(cacheName);
}
})
);
})
);
});以上就是我在使用 Cache API 过程中总结的一些实战经验和踩坑总结。希望这些经验能对你有所帮助。如果你有更好的方案或建议，欢迎在评论区交流。
暂无评论