前端缓存策略

前端缓存是提升网站性能和用户体验的关键技术，主要分为 浏览器缓存、应用层缓存、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