当前位置：首页 > news >正文

前端资源缓存策略分层：浏览器缓存、CDN、Service Worker 三层联动

news 2026/7/11 20:59:13

前端资源缓存策略分层：浏览器缓存、CDN、Service Worker 三层联动

一、引言：缓存分层的重要性

前端性能优化中，缓存是最有效的手段之一。合理的缓存策略能显著减少网络请求、降低服务器负载、提升用户体验。然而，单一层次的缓存往往难以应对复杂的网络环境和业务需求。

现代 Web 应用通常涉及多种资源类型：HTML 入口文件、JavaScript 打包产物、CSS 样式表、图片字体等静态资源。这些资源的更新频率、访问模式和安全要求各不相同，需要差异化的缓存策略。

分层缓存策略通过组合浏览器缓存、CDN 边缘缓存和 Service Worker 本地缓存，构建多层次的防御体系。每一层都有其适用场景和局限性，协同工作才能实现最优的缓存效果。

二、核心架构：三层缓存的协作机制

2.1 缓存层次划分

graph LR A[用户请求] --> B[Service Worker 缓存] B -->|未命中| C[浏览器 HTTP 缓存] C -->|未命中| D[CDN 边缘节点] D -->|未命中| E[源站服务器] B -->|命中| F[立即返回] C -->|命中| F D -->|命中| F E -->|返回| D D -->|缓存| C C -->|存储| B

第一层：Service Worker 缓存

运行在浏览器后台的脚本，拦截网络请求，实现细粒度的缓存控制。适用于离线场景和动态缓存策略。

第二层：浏览器 HTTP 缓存

遵循 HTTP 缓存头（Cache-Control、Expires、ETag 等），由浏览器自动管理。适合静态资源的长期缓存。

第三层：CDN 边缘缓存

内容分发网络在全球部署的边缘节点，缓存资源并提供就近访问。降低源站压力，加速跨区域访问。

2.2 缓存策略设计原则

稳定性优先：不常变化的资源（如带有 hash 的 JS/CSS）设置长期缓存
灵活性保障：HTML 入口文件等频繁更新的资源，采用较短缓存或协商缓存
降级方案：当某一层缓存失效时，其他层能够提供备份
一致性维护：确保多层缓存之间的数据一致性，避免返回过期内容

三、实战方案：分层缓存的实现细节

3.1 浏览器 HTTP 缓存配置

通过 Nginx 或 CDN 配置响应头：

# 静态资源长期缓存（1年） location /assets/ { add_header Cache-Control "public, max-age=31536000, immutable"; add_header Access-Control-Allow-Origin *; expires 1y; } # HTML 文件不缓存或短时间缓存 location = /index.html { add_header Cache-Control "no-cache, no-store, must-revalidate"; add_header Pragma no-cache; add_header Expires 0; } # 带 hash 的资源文件 location ~* \.[a-f0-9]{8,}\.(js|css)$ { add_header Cache-Control "public, max-age=31536000, immutable"; }

在 Vite 构建中配置资源命名：

// vite.config.ts import { defineConfig } from 'vite'; export default defineConfig({ build: { rollupOptions: { output: { // 带 hash 的文件名 entryFileNames: 'assets/[name]-[hash].js', chunkFileNames: 'assets/[name]-[hash].js', assetFileNames: 'assets/[name]-[hash].[ext]' } } } });

3.2 CDN 缓存策略配置

以阿里云 CDN 为例，通过 API 批量配置缓存规则：

import Core from '@alicloud/pop-core'; interface CDNCacheRule { path: string; cacheTtl: number; cacheType: 'file_suffix' | 'directory' | 'path'; } async function batchConfigureCDNCache( domain: string, rules: CDNCacheRule[] ): Promise<void> { try { const client = new Core({ accessKeyId: process.env.ALIYUN_ACCESS_KEY_ID || '', accessKeySecret: process.env.ALIYUN_ACCESS_KEY_SECRET || '', endpoint: 'https://cdn.aliyuncs.com', apiVersion: '2018-05-10' }); for (const rule of rules) { const params = { DomainName: domain, CacheContent: rule.path, TtlValue: rule.cacheTtl, Weight: '1' }; await client.request('ModifyCdnDomainSchdmByProperty', params, { method: 'POST' }); console.log(`CDN 缓存规则已配置: ${rule.path} -> ${rule.cacheTtl}s`); } } catch (error) { console.error('CDN 配置失败:', error); throw new Error(`CDN缓存配置失败: ${error instanceof Error ? error.message : '未知错误'}`); } } // 使用示例 batchConfigureCDNCache('www.example.com', [ { path: '*.js', cacheTtl: 31536000, cacheType: 'file_suffix' }, { path: '*.css', cacheTtl: 31536000, cacheType: 'file_suffix' }, { path: '/api/*', cacheTtl: 0, cacheType: 'path' } ]);

3.3 Service Worker 缓存策略

实现基于策略模式的缓存管理：

// sw.js - Service Worker 脚本 const CACHE_STRATEGIES = { // 缓存优先（适用于静态资源） CACHE_FIRST: 'cache-first', // 网络优先（适用于实时数据） NETWORK_FIRST: 'network-first', // 仅缓存（适用于离线场景） CACHE_ONLY: 'cache-only', // 仅网络（适用于敏感数据） NETWORK_ONLY: 'network-only' }; class CacheManager { private cacheName: string; constructor(cacheName: string) { this.cacheName = cacheName; } async handleRequest( request: Request, strategy: string ): Promise<Response> { switch (strategy) { case CACHE_STRATEGIES.CACHE_FIRST: return this.cacheFirst(request); case CACHE_STRATEGIES.NETWORK_FIRST: return this.networkFirst(request); default: return fetch(request); } } private async cacheFirst(request: Request): Promise<Response> { const cache = await caches.open(this.cacheName); const cachedResponse = await cache.match(request); if (cachedResponse) { // 后台更新缓存 this.updateCacheInBackground(request, cache); return cachedResponse; } try { const networkResponse = await fetch(request); if (networkResponse.ok) { cache.put(request, networkResponse.clone()); } return networkResponse; } catch (error) { console.error('网络请求失败:', error); throw new Error('资源获取失败且缓存未命中'); } } private async networkFirst(request: Request): Promise<Response> { const cache = await caches.open(this.cacheName); try { const networkResponse = await fetch(request); if (networkResponse.ok) { cache.put(request, networkResponse.clone()); } return networkResponse; } catch (error) { const cachedResponse = await cache.match(request); if (cachedResponse) { return cachedResponse; } throw new Error('网络不可用且缓存未命中'); } } private async updateCacheInBackground( request: Request, cache: Cache ): Promise<void> { fetch(request) .then(response => { if (response.ok) { cache.put(request, response); } }) .catch(() => { // 后台更新失败，不影响主流程 }); } } // 注册 Service Worker self.addEventListener('fetch', (event: FetchEvent) => { const cacheManager = new CacheManager('v1'); const url = new URL(event.request.url); let strategy = CACHE_STRATEGIES.NETWORK_FIRST; if (url.pathname.match(/\.(js|css|png|jpg|gif|woff2)$/)) { strategy = CACHE_STRATEGIES.CACHE_FIRST; } event.respondWith( cacheManager.handleRequest(event.request, strategy) ); });

四、最佳实践与注意事项

4.1 缓存失效策略

版本化：为静态资源添加内容 hash，确保更新后获取最新版本
API 控制：通过 CDN 的刷新 API，在发布后主动清除缓存
降级处理：当缓存失效时，提供友好的错误提示或备用资源

async function invalidateCDNCache( domain: string, paths: string[] ): Promise<void> { try { // 调用 CDN 刷新接口 await cdnClient.refreshCache({ domain, paths: paths.map(p => `https://${domain}${p}`) }); } catch (error) { console.error('缓存失效失败:', error); // 记录失败，安排重试 } }

4.2 调试与监控

利用浏览器 DevTools 的 Network 面板，检查缓存命中情况：

Size 列：显示(memory cache)或(disk cache)表示浏览器缓存命中
Transferred 列：显示实际传输大小，缓存命中时为 0
Timing 列：查看各阶段的耗时，识别缓存未命中的瓶颈

建立缓存命中率监控：

function trackCacheHitRate() { const resources = performance.getEntriesByType('resource'); let cacheHits = 0; resources.forEach(resource => { const entry = resource as PerformanceResourceTiming; if (entry.transferSize === 0 && entry.decodedBodySize > 0) { cacheHits++; } }); const hitRate = cacheHits / resources.length; console.log(`缓存命中率: ${(hitRate * 100).toFixed(2)}%`); // 上报到监控系统 reportMetric('cache_hit_rate', hitRate); }