前端緩存是提升網(wǎng)站性能和用戶體驗(yàn)的關(guān)鍵技術(shù)，主要分為 瀏覽器緩存、應(yīng)用層緩存、CDN緩存、內(nèi)存緩存。以下是常見(jiàn)策略及其應(yīng)用場(chǎng)景：

一、瀏覽器緩存（HTTP 緩存）

1. 強(qiáng)緩存（Cache-Control/Expires）

• 原理：直接使用本地緩存，無(wú)需請(qǐng)求服務(wù)器。
• 控制頭：
  • Cache-Control: max-age=3600（優(yōu)先）
  • Expires: Wed, 21 Oct 2025 07:28:00 GMT（舊版，受本地時(shí)間影響）
• 適用場(chǎng)景：靜態(tài)資源（如 JS、CSS、圖片）。
• 示例配置（Nginx）：

  location ~* \.(js|css|png|jpg|gif|svg)$ {
      expires 7d;  # 緩存 7 天
      add_header Cache-Control "public";
  }
  

2. 協(xié)商緩存（ETag/Last-Modified）

• 原理：發(fā)送請(qǐng)求到服務(wù)器驗(yàn)證緩存是否可用，若未修改則返回 304。
• 控制頭：
  • ETag: "123456789"（文件哈希值）
  • Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT（文件修改時(shí)間）
• 適用場(chǎng)景：可能變化但需精確控制的資源（如用戶頭像）。
• 示例代碼（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);
  

二、應(yīng)用層緩存

1. LocalStorage/SessionStorage

• 特點(diǎn)：
  • 存儲(chǔ)大?。?-10MB（不同瀏覽器）。
  • 數(shù)據(jù)類(lèi)型：字符串（需 JSON 序列化）。
  • 有效期：localStorage 永久，sessionStorage 會(huì)話結(jié)束清除。
• 適用場(chǎng)景：用戶偏好設(shè)置、臨時(shí)數(shù)據(jù)（如購(gòu)物車(chē)）。
• 示例代碼：

  // 存儲(chǔ)
  localStorage.setItem('user', JSON.stringify({ name: 'John', age: 30 }));
  
  // 讀取
  const user = JSON.parse(localStorage.getItem('user'));
  

2. IndexedDB

• 特點(diǎn)：
  • 存儲(chǔ)大?。簾o(wú)明確限制（受硬盤(pán)空間約束）。
  • 支持事務(wù)和索引，適合存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)。
  • 異步 API，避免阻塞主線程。
• 適用場(chǎng)景：大量數(shù)據(jù)緩存（如離線地圖、郵件客戶端）。
• 示例代碼：

  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

• 特點(diǎn)：
  • 運(yùn)行在瀏覽器后臺(tái)的獨(dú)立線程。
  • 攔截網(wǎng)絡(luò)請(qǐng)求，實(shí)現(xiàn)離線緩存和推送通知。
• 適用場(chǎng)景：離線應(yīng)用（如 PWA）、靜態(tài)資源預(yù)緩存。
• 示例代碼（注冊(cè) Service Worker）：

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service Worker 注冊(cè)成功');
      });
  }
  

   

  // service-worker.js
  self.addEventListener('fetch', (event) => {
    event.respondWith(
      caches.match(event.request)
        .then(cachedResponse => cachedResponse || fetch(event.request))
    );
  });
  

三、CDN 緩存

• 原理：內(nèi)容分發(fā)網(wǎng)絡(luò)在全球多個(gè)節(jié)點(diǎn)緩存資源，用戶就近訪問(wèn)。
• 優(yōu)勢(shì)：
  • 加速靜態(tài)資源加載（如 JS 庫(kù)、圖片）。
  • 減輕源服務(wù)器壓力。
• 示例配置（使用 UNPKG CDN）：

  <script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
  

四、內(nèi)存緩存（Runtime Cache）

• 特點(diǎn)：
  • 存儲(chǔ)在 JS 變量中，讀取速度極快。
  • 頁(yè)面刷新后失效。
• 適用場(chǎng)景：高頻訪問(wèn)數(shù)據(jù)（如用戶信息）。
• 示例代碼：

  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;
  }
  

五、緩存策略選擇指南

總結(jié)

到此這篇關(guān)于前端緩存策略及其應(yīng)用場(chǎng)景詳解的文章就介紹到這了,更多相關(guān)前端緩存策略內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論