HTML5 應用程式快取與瀏覽器快取

儘管熟悉“快取”這個詞，但您可能並不完全理解它在 Web 上下文中的含義。快取，在日常口語中，是指儲存某些東西以備日後可能有用。批次或主儲存無法滿足客戶端的需求，因此使用快取。快取可以最大程度地減少延遲，加快輸入/輸出 (I/O) 活動，並減少資料訪問時間。

讓我們進一步瞭解 HTML5 應用程式快取與瀏覽器快取，以便更好地理解它們。

HTML5 應用程式快取

藉助 HTML5 的應用程式快取 (AppCache)，可以快取 Web 應用程式並在沒有網際網路連線的情況下訪問。根據新的 HTML5 規範，只要客戶端連線，瀏覽器就可以預取網站資產的全部或部分，例如 HTML 檔案、圖片、CSS、JavaScript 等。

使用者無需事先檢視過這些內容即可獲取它們。換句話說，應用程式快取可以預取從未訪問過且因此在標準瀏覽器快取中不可用的網站。雖然您顯然是在浪費頻寬來最初下載這些專案，但預取檔案可以加快網站的效能。

應用程式快取的用途

  • 離線瀏覽 - 使用者可以隨時訪問網站，即使在離線狀態下也能訪問。

  • 速度 - 當資料已經儲存時，可以輕鬆快速地訪問它；快取的資源載入速度比未快取的資源快。

  • 減少伺服器負載 - 瀏覽器只會從伺服器下載新更新的資源。

示例

在以下示例中，我們正在建立一個帶有應用程式快取的簡單網頁。

<!DOCTYPE html>
<html manifest="tutorial.appcache">
   <body>
      Welcome to Tutorialspoint.
      <p>
         click to open <a href="https://tutorialspoint.tw/index.htm"> the page</a>,
         then go offline, and reload the page. The content
         should still work.
      </p>
   </body>
</html>

輸出

當指令碼執行時，它將生成一個輸出，其中包含一個連結，該連結是主檔案。當您嘗試開啟連結的頁面時，下一頁將執行。之後，如果您離線並重新載入頁面，頁面的內容將保持不變。

瀏覽器快取

透過儲存常用頁面的副本並在您返回時使用該副本呈現頁面，Web 瀏覽器使用快取來儲存 HTML 網頁。如果頁面的日期與先前儲存的副本上的日期匹配，則計算機將使用硬碟驅動器上的副本，而不是再次從 Internet 下載它。

當您訪問網站時，您的瀏覽器會複製頁面的部分內容並將其儲存到計算機的硬碟驅動器中。您的瀏覽器還會儲存以下一些專案：

  • 圖片 - 徽標、圖片、背景等。

  • HTML

  • CSS

  • JavaScript

簡單來說，“靜態資產”是指網站中從一次訪問到下一次訪問都不會更改的部分，並且通常由瀏覽器快取。瀏覽器快取提供了許多優於其缺點的優勢。您只需要良好的防火牆、病毒掃描程式和常識即可確保計算機安全。

區別

雖然 AppCache 在使用者線上時提供了與典型瀏覽器快取相同的速度優勢，但它最初是為了使網站能夠離線使用而建立的。

它與瀏覽器快取的主要區別在於，瀏覽器快取僅儲存您實際訪問過的頁面和相關資產，而您可以在清單檔案中定義瀏覽器應快取的所有資產（可能是您的整個網站）。

更新於: 2023年10月11日

215 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告