提升效能：Web 和行動裝置的基本快取策略

首頁 > 程式設計 > 提升效能：Web 和行動裝置的基本快取策略

提升效能：Web 和行動裝置的基本快取策略

發佈於2024-07-30

介紹

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

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