前端缓存策略及其应用场景详解
作者：执梦起航
缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物这篇文章主要介绍了前端缓存策略及其应用场景的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
前端缓存是提升网站性能和用户体验的关键技术，主要分为 浏览器缓存、应用层缓存、CDN缓存、内存缓存。以下是常见策略及其应用场景：
一、浏览器缓存（HTTP 缓存）
1. 强缓存（Cache-Control/Expires）
- 原理：直接使用本地缓存，无需请求服务器。
- 控制头：
Cache-Control: max-age=3600（优先）Expires: Wed, 21 Oct 2025 07:28:00 GMT（旧版，受本地时间影响）
- 适用场景：静态资源（如 JS、CSS、图片）。
- 示例配置（Nginx）：
location ~* \.(js|css|png|jpg|gif|svg)$ { expires 7d; # 缓存 7 天 add_header Cache-Control "public"; }
2. 协商缓存（ETag/Last-Modified）
- 原理：发送请求到服务器验证缓存是否可用，若未修改则返回 304。
- 控制头：
ETag: "123456789"（文件哈希值）Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT（文件修改时间）
- 适用场景：可能变化但需精确控制的资源（如用户头像）。
- 示例代码（Node.js）：
const http = require('http'); const fs = require('fs'); const crypto = require('crypto'); http.createServer((req, res) => { fs.readFile('index.html', (err, data) => { const hash = crypto.createHash('md5').update(data).digest('hex'); if (req.headers['if-none-match'] === hash) { res.statusCode = 304; return res.end(); } res.setHeader('ETag', hash); res.end(data); }); }).listen(3000);
二、应用层缓存
1. LocalStorage/SessionStorage
- 特点：
- 存储大小：5-10MB（不同浏览器）。
- 数据类型：字符串（需 JSON 序列化）。
- 有效期：
localStorage永久，sessionStorage会话结束清除。
- 适用场景：用户偏好设置、临时数据（如购物车）。
- 示例代码：
// 存储 localStorage.setItem('user', JSON.stringify({ name: 'John', age: 30 })); // 读取 const user = JSON.parse(localStorage.getItem('user'));
2. IndexedDB
- 特点：
- 存储大小：无明确限制（受硬盘空间约束）。
- 支持事务和索引，适合存储结构化数据。
- 异步 API，避免阻塞主线程。
- 适用场景：大量数据缓存（如离线地图、邮件客户端）。
- 示例代码：
const request = indexedDB.open('myDatabase', 1); request.onsuccess = (event) => { const db = event.target.result; const transaction = db.transaction(['users'], 'readwrite'); const store = transaction.objectStore('users'); store.put({ id: 1, name: 'John' }); };
3. Service Worker
- 特点：
- 运行在浏览器后台的独立线程。
- 拦截网络请求，实现离线缓存和推送通知。
- 适用场景：离线应用（如 PWA）、静态资源预缓存。
- 示例代码（注册 Service Worker）：
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') .then(registration => { console.log('Service Worker 注册成功'); }); }// service-worker.js self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) .then(cachedResponse => cachedResponse || fetch(event.request)) ); });
三、CDN 缓存
- 原理：内容分发网络在全球多个节点缓存资源，用户就近访问。
- 优势：
- 加速静态资源加载（如 JS 库、图片）。
- 减轻源服务器压力。
- 示例配置（使用 UNPKG CDN）：
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
四、内存缓存（Runtime Cache）
- 特点：
- 存储在 JS 变量中，读取速度极快。
- 页面刷新后失效。
- 适用场景：高频访问数据（如用户信息）。
- 示例代码：
const cache = new Map(); function getData(key) { if (cache.has(key)) { return cache.get(key); } const data = fetchDataFromServer(key); cache.set(key, data); return data; }
五、缓存策略选择指南
| 场景 | 推荐缓存方案 |
|---|---|
| 静态资源（JS/CSS/ 图片） | HTTP 强缓存 + CDN |
| 动态数据（如 API 响应） | 协商缓存 + LocalStorage |
| 离线应用 | Service Worker + IndexedDB |
| 高频数据访问 | 内存缓存（如 Map 对象）、vuex、pina |
| 用户会话信息 | SessionStorage |
总结
到此这篇关于前端缓存策略及其应用场景详解的文章就介绍到这了,更多相关前端缓存策略内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！