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

前端缓存策略：别让用户每次都等得花儿都谢了

news 2026/6/3 0:31:42

前端缓存策略：别让用户每次都等得花儿都谢了

什么是前端缓存？

前端缓存是指在浏览器端存储资源，减少网络请求，提高页面加载速度。别以为缓存只是后端的事，前端缓存做好了，能让你的页面加载速度飞起，用户体验直接上一个档次。

为什么需要缓存？

提高性能：减少网络请求，降低延迟
节省带宽：减少数据传输，降低服务器压力
离线访问：即使在网络不稳定的情况下也能访问部分内容
提升用户体验：页面加载更快，交互更流畅

前端缓存类型

1. HTTP 缓存

HTTP 缓存是最基础的缓存策略，通过 HTTP 头控制。

# 强缓存 Cache-Control: max-age=3600 Expires: Wed, 21 Oct 2025 07:28:00 GMT # 协商缓存 ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4" Last-Modified: Mon, 15 May 2023 08:45:12 GMT

2. Service Worker 缓存

Service Worker 缓存是 PWA 的核心特性，提供了更灵活的缓存控制。

// service-worker.js self.addEventListener('install', (event) => { event.waitUntil( caches.open('v1').then((cache) => { return cache.addAll([ '/', '/index.html', '/styles.css', '/script.js', '/images/logo.png' ]); }) ); }); self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((response) => { return response || fetch(event.request).then((response) => { const responseToCache = response.clone(); caches.open('v1').then((cache) => { cache.put(event.request, responseToCache); }); return response; }); }) ); });

3. LocalStorage 和 SessionStorage

LocalStorage 和 SessionStorage 用于存储小型数据，前者持久化存储，后者会话结束后清除。

// LocalStorage localStorage.setItem('user', JSON.stringify({ name: 'cannonmonster01', role: 'frontend' })); const user = JSON.parse(localStorage.getItem('user')); // SessionStorage sessionStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'); const token = sessionStorage.getItem('token');

4. IndexedDB

IndexedDB 用于存储大量结构化数据，支持复杂查询。

// 打开数据库 const request = indexedDB.open('myDatabase', 1); request.onupgradeneeded = (event) => { const db = event.target.result; const store = db.createObjectStore('users', { keyPath: 'id' }); store.createIndex('name', 'name', { unique: false }); }; request.onsuccess = (event) => { const db = event.target.result; const transaction = db.transaction(['users'], 'readwrite'); const store = transaction.objectStore('users'); // 添加数据 store.add({ id: 1, name: 'cannonmonster01', role: 'frontend' }); // 查询数据 const index = store.index('name'); const request = index.get('cannonmonster01'); request.onsuccess = (event) => { console.log('Found user:', event.target.result); }; };

缓存策略最佳实践

合理设置缓存时间：根据资源的更新频率设置合适的缓存时间
使用版本化资源：通过文件名哈希或版本号确保资源更新时能被正确获取
实现缓存降级：当网络请求失败时，使用缓存数据
定期清理缓存：避免缓存过大影响性能
考虑用户隐私：敏感数据不应该存储在客户端

常见缓存问题及解决方案

1. 缓存击穿

问题：热点资源缓存过期，导致大量请求同时打到服务器

解决方案：

使用互斥锁，只让一个请求去服务器获取数据
预加载热点资源
延长热点资源的缓存时间

2. 缓存雪崩

问题：大量缓存同时过期，导致服务器压力骤增

解决方案：

缓存时间随机化
分层缓存
预加载策略

3. 缓存穿透

问题：请求不存在的数据，缓存不生效，直接打到服务器

解决方案：

布隆过滤器
缓存空值
接口层校验

缓存优化工具

1. Workbox

Workbox 是 Google 提供的 PWA 工具库，简化了 Service Worker 的使用。

// 安装 // npm install workbox-cli --global // 使用 workbox init // workbox-config.js module.exports = { globDirectory: 'dist/', globPatterns: [ '**/*.{html,js,css,png,jpg,gif,svg,json}' ], swDest: 'dist/service-worker.js', runtimeCaching: [ { urlPattern: /^https:\/\/api\.example\.com\//, handler: 'NetworkFirst', options: { cacheName: 'api-cache', expiration: { maxEntries: 100, maxAgeSeconds: 60 * 60 * 24 // 1 day } } } ] };

2. LRU 缓存

LRU (Least Recently Used) 是一种常用的缓存淘汰策略，当缓存达到容量上限时，淘汰最久未使用的资源。

class LRUCache { constructor(capacity) { this.capacity = capacity; this.cache = new Map(); } get(key) { if (!this.cache.has(key)) return -1; // 将访问的元素移到队尾 const value = this.cache.get(key); this.cache.delete(key); this.cache.set(key, value); return value; } put(key, value) { if (this.cache.has(key)) { this.cache.delete(key); } else if (this.cache.size >= this.capacity) { // 删除最久未使用的元素（队首） this.cache.delete(this.cache.keys().next().value); } this.cache.set(key, value); } }