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

前端缓存策略：让你的应用飞起来

news 2026/6/22 21:59:19

前端缓存策略：让你的应用飞起来

一、引言

又到了我这个毒舌工匠上线的时间了！今天咱们来聊聊前端缓存策略这个话题。别以为缓存只是后端的事情，前端缓存同样重要。一个好的缓存策略能够大大提高应用的性能和用户体验，让你的应用飞起来。

二、什么是前端缓存

前端缓存就是将数据存储在浏览器中，以便下次访问时能够快速获取，而不需要从服务器重新请求。简单来说，就是让浏览器记住一些数据，下次用的时候直接拿，不用再去服务器要。

三、前端缓存的类型

1. HTTP缓存

HTTP缓存是基于HTTP协议的缓存机制，包括强缓存和协商缓存。

1.1 强缓存

强缓存是指浏览器直接从缓存中获取资源，不需要向服务器发送请求。

相关HTTP头：

Expires：指定资源的过期时间
Cache-Control：控制缓存的行为，包括max-age、no-cache、no-store等

代码示例：

// 服务器设置强缓存 app.get('/static/js/app.js', (req, res) => { res.setHeader('Cache-Control', 'max-age=31536000'); // 1年 res.sendFile(path.join(__dirname, 'static/js/app.js')); });

1.2 协商缓存

协商缓存是指浏览器向服务器发送请求，服务器根据请求头判断资源是否有更新，如果没有更新则返回304 Not Modified，浏览器从缓存中获取资源。

相关HTTP头：

Last-Modified：资源的最后修改时间
If-Modified-Since：浏览器发送的请求头，包含资源的最后修改时间
ETag：资源的唯一标识符
If-None-Match：浏览器发送的请求头，包含资源的ETag

代码示例：

// 服务器设置协商缓存 app.get('/api/data', (req, res) => { const data = { message: 'Hello World' }; const etag = generateETag(data); if (req.headers['if-none-match'] === etag) { res.status(304).end(); return; } res.setHeader('ETag', etag); res.json(data); });

2. 浏览器存储

浏览器存储是指在浏览器中存储数据的机制，包括 localStorage、sessionStorage、IndexedDB 等。

2.1 localStorage

localStorage是一种持久化的存储机制，数据会一直存储在浏览器中，直到被手动删除。

代码示例：

// 存储数据 localStorage.setItem('user', JSON.stringify({ name: '张三', age: 20 })); // 获取数据 const user = JSON.parse(localStorage.getItem('user')); // 删除数据 localStorage.removeItem('user'); // 清空所有数据 localStorage.clear();

2.2 sessionStorage

sessionStorage是一种会话级别的存储机制，数据只在当前会话中有效，关闭浏览器窗口后数据会被删除。

代码示例：

// 存储数据 sessionStorage.setItem('token', 'abc123'); // 获取数据 const token = sessionStorage.getItem('token'); // 删除数据 sessionStorage.removeItem('token'); // 清空所有数据 sessionStorage.clear();

2.3 IndexedDB

IndexedDB是一种功能强大的浏览器存储机制，支持存储大量数据，并且支持索引和事务。

代码示例：

// 打开数据库 const request = indexedDB.open('myDB', 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: '张三', age: 20 }); // 获取数据 store.get(1).onsuccess = (event) => { console.log(event.target.result); }; // 提交事务 transaction.oncomplete = () => { db.close(); }; };

3. Service Worker 缓存

Service Worker 缓存是一种基于 Service Worker 的缓存机制，能够实现离线访问。

代码示例：

// service-worker.js const CACHE_NAME = 'my-cache-v1'; const urlsToCache = [ '/', '/index.html', '/static/js/app.js', '/static/css/app.css' ]; // 安装 Service Worker self.addEventListener('install', (event) => { event.waitUntil( caches.open(CACHE_NAME) .then((cache) => { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); }); // 激活 Service Worker self.addEventListener('activate', (event) => { const cacheWhitelist = [CACHE_NAME]; event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames.map((cacheName) => { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); }); // 拦截请求 self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) .then((response) => { if (response) { return response; } return fetch(event.request); }) ); });

四、前端缓存的最佳实践

1. 合理设置HTTP缓存

合理设置HTTP缓存是前端缓存的基础。你应该根据资源的性质设置不同的缓存策略。

静态资源：

对于长期不变的静态资源（如图片、字体等），使用强缓存，设置较长的过期时间。
对于经常变化的静态资源（如JS、CSS等），使用协商缓存，或者在文件名中添加版本号。

代码示例：

// 对于长期不变的静态资源 app.get('/static/images/logo.png', (req, res) => { res.setHeader('Cache-Control', 'max-age=31536000'); // 1年 res.sendFile(path.join(__dirname, 'static/images/logo.png')); }); // 对于经常变化的静态资源 app.get('/static/js/app.js', (req, res) => { res.setHeader('Cache-Control', 'no-cache'); // 强制协商缓存 res.sendFile(path.join(__dirname, 'static/js/app.js')); });

2. 使用浏览器存储存储用户数据

使用浏览器存储存储用户数据是前端缓存的重要组成部分。你可以使用 localStorage 存储用户的偏好设置、购物车等数据，使用 sessionStorage 存储会话相关的数据。

代码示例：

// 存储用户偏好设置 localStorage.setItem('theme', 'dark'); localStorage.setItem('fontSize', '16px'); // 存储购物车数据 localStorage.setItem('cart', JSON.stringify([ { id: 1, name: '商品1', price: 100, quantity: 1 }, { id: 2, name: '商品2', price: 200, quantity: 2 } ])); // 存储会话相关的数据 sessionStorage.setItem('token', 'abc123'); sessionStorage.setItem('userId', '123');

3. 使用Service Worker实现离线访问

使用Service Worker实现离线访问是前端缓存的高级应用。你可以使用 Service Worker 缓存静态资源，实现离线访问。

代码示例：

// service-worker.js const CACHE_NAME = 'my-cache-v1'; const urlsToCache = [ '/', '/index.html', '/static/js/app.js', '/static/css/app.css', '/static/images/logo.png' ]; // 安装 Service Worker self.addEventListener('install', (event) => { event.waitUntil( caches.open(CACHE_NAME) .then((cache) => { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); }); // 激活 Service Worker self.addEventListener('activate', (event) => { const cacheWhitelist = [CACHE_NAME]; event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames.map((cacheName) => { if (cacheWhitelist.indexOf(cacheName) === -1) { 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((response) => { if (!response || response.status !== 200 || response.type !== 'basic') { return response; } const responseToCache = response.clone(); caches.open(CACHE_NAME) .then((cache) => { cache.put(event.request, responseToCache); }); return response; }); }) ); });

4. 缓存策略的选择

缓存策略的选择是前端缓存的关键。你应该根据资源的性质和应用的需求选择合适的缓存策略。

常见的缓存策略：

Cache First：优先从缓存中获取资源，如果缓存中没有则从服务器获取。
Network First：优先从服务器获取资源，如果网络请求失败则从缓存中获取。
Stale While Revalidate：从缓存中获取资源的同时从服务器获取新资源，更新缓存。

代码示例：

// Cache First 策略 self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) .then((response) => { if (response) { return response; } return fetch(event.request) .then((response) => { if (!response || response.status !== 200 || response.type !== 'basic') { return response; } const responseToCache = response.clone(); caches.open(CACHE_NAME) .then((cache) => { cache.put(event.request, responseToCache); }); return response; }); }) ); }); // Network First 策略 self.addEventListener('fetch', (event) => { event.respondWith( fetch(event.request) .then((response) => { if (!response || response.status !== 200 || response.type !== 'basic') { return caches.match(event.request); } const responseToCache = response.clone(); caches.open(CACHE_NAME) .then((cache) => { cache.put(event.request, responseToCache); }); return response; }) .catch(() => { return caches.match(event.request); }) ); }); // Stale While Revalidate 策略 self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) .then((response) => { const fetchPromise = fetch(event.request) .then((networkResponse) => { if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') { return networkResponse; } const responseToCache = networkResponse.clone(); caches.open(CACHE_NAME) .then((cache) => { cache.put(event.request, responseToCache); }); return networkResponse; }) .catch(() => { return response; }); return response || fetchPromise; }) ); });