首頁 > web前端 > js教程 > 主體

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

PHPz
發布: 2024-07-17 06:23:26
原創
1176 人瀏覽過

介紹

快取是一個遊戲規則改變者,可以提高網路和行動應用程式的速度和回應能力。在本部落格中,我們將探索前端應用程式的基本快取策略,解決大數據處理問題,並深入研究後向/前向 (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 快取是指瀏覽器將網頁狀態儲存在瀏覽器歷史記錄中的機制,使用戶能夠來回導航而無需重新載入整個頁面。

大多數瀏覽器都有它們,您可以從檢查標籤中探索它

Inspect Tab of Chrome

B/F 快取如何運作

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

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

B/F 快取的好處

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

  • 改進的使用者體驗:無縫過渡增強了整體使用者體驗。

  • 減少伺服器負載:隨著頁面狀態的儲存和重複使用,對伺服器的請求減少。

結論

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

希望您從這個部落格中學到了新東西。追蹤我,獲取簡短、清晰、深刻、獨特的技術部落格。謝謝!

以上是提升效能:Web 和行動裝置的基本快取策略的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板