介紹

快取是遊戲規則改變者，可以提高網路和行動應用程式的速度和回應能力。在本部落格中，我們將探索前端應用程式的基本快取策略，解決大數據處理問題，並深入研究後向/前向 (B/F) 快取的複雜性。

前端應用程式的關鍵快取策略

瀏覽器快取

瀏覽器快取利用瀏覽器在本機上儲存 Web 資源副本的能力，減少載入時間和伺服器請求。以下是一些關鍵方面：

• Cache-Control：此 HTTP 標頭規定快取原則。例如，Cache-Control: max-age=3600 告訴瀏覽器將資源快取 3600 秒。

• Expires：此標頭指定快取資源的確切到期日/時間。它經常與 Cache-Control 一起使用。

• ETag：ETag 標頭為資源版本提供唯一識別碼。當資源發生變化時，其 ETag 也會發生變化，從而實現高效的快取驗證。
  

Cache-Control: public, max-age=86400
Expires: Wed, 21 Oct 2024 07:28:00 GMT
ETag: "33a64df5"

服務人員

Service Workers 是在背景執行的腳本，提供進階快取功能。它們可以攔截網路請求並提供快取的回應，甚至允許離線存取。

• 快取優先：如果可用，則從快取提供服務；如果沒有，則從網路取得。

• Network First：先從網路取得；如果網路不可用，則從快取提供服務。

• Stale-While-Revalidate：從快取提供服務，並在後台同時取得和更新快取。
  

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

本地儲存和 IndexedDB

本地儲存和 IndexedDB 是基於瀏覽器的儲存解決方案，用於在客戶端持久保存資料。

• 本地儲存：非常適合將少量資料儲存為鍵值對。它是同步的，儲存限制約為 5MB。

• IndexedDB：適合儲存大量結構化資料。它支援事務和複雜查詢，非常適合處理更大量、更複雜的資料。

例子

本地儲存

localStorage.setItem('key', 'value');
let value = localStorage.getItem('key');

索引資料庫

let request = indexedDB.open('database', 1);
request.onupgradeneeded = event => {
  let db = event.target.result;
  db.createObjectStore('store', { keyPath: 'id' });
};

瀏覽器本身有一些快取技術，這裡是其中之一。

深入研究後向/前向 (B/F) 緩存

什麼是 B/F 快取？

B/F 快取是指瀏覽器將網頁狀態儲存在瀏覽器歷史記錄中的機制，使用戶能夠來回導航而無需重新載入整個頁面。

大多數瀏覽器都有它們，您可以從檢查選項卡中探索它

B/F 快取如何運作

• 頁面快取：瀏覽器儲存頁面的完整狀態，包括 DOM、JavaScript 上下文和記憶體資料。

• BFCache：現代瀏覽器（如 Chrome 和 Firefox）使用 BFCache 將頁面狀態保留在記憶體中，從而允許即時導航。

B/F 快取的好處

• 更快的導覽：使用瀏覽器的後退和前進按鈕時即時載入頁面。

• 改善使用者體驗：無縫過渡增強整體使用者體驗。

• 減少伺服器負載：由於儲存和重複使用頁面狀態，對伺服器的請求減少。

結論

實施高效率的快取策略可以顯著提高 Web 和行動應用程式的效能。從瀏覽器快取和服務工作者到處理大數據和利用 B/F 緩存，這些技術可確保您的應用程式快速、響應靈敏且用戶友好。立即開始利用這些策略來徹底改變您的應用程式的效能！

希望您從這個部落格中學到新東西。追蹤我，查看簡短、清晰、深刻、獨特的技術部落格。謝謝！