HTML5快取機制是什麼？怎麼更新快取-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5快取機制是什麼？怎麼更新快取

云罗郡主

Jan 04, 2019 am 10:45 AM

html5

這篇文章帶給大家的內容是關於HTML5快取機制是什麼？怎麼更新緩存，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。【建議閱讀：Html5教學】

HTML5快取機制是什麼？怎麼更新快取

#背景

離線快取是HTML5提供的新功能。利用HTML5提供的離線快取功能可以將網站的一些常用的檔案快取到本地，在沒有網路的情況下依舊可以存取快取的頁面。可以快取的檔案類型有很多，包括但不限於html,css,js,靜態圖片資源等。

事實上，離線快取不僅在沒有網路的情況下會被使用，當有網路的情況下，本地快取過的檔案依舊會被優先使用。有網路的情況下，瀏覽器會回傳200,

離線快取有很多好處。第一，可以有效提升使用者體驗，節省使用者流量。第二，可以提高頁面載入速度，已快取的資源載入的更快。第三，可以減少伺服器負載，瀏覽器只會從伺服器下載更新過或更改過的資源。

瀏覽器支援

基本上所有的主流瀏覽器都支持，除了 IE,畢竟奇葩，像這種瀏覽器，還是不要去相容了。

Manifest

要想在頁面上使用離線緩存，只需要在頁面的html 加入一個manifest屬性，使用方法如下。

<!DOCTYPE HTML>
<html manifest = "cache.appcache">
<body>…</body>
</html>

當瀏覽器載入頁面的時候，發現html上面擁有屬性mannifest,就會去請求cache.appcache檔案（ps:這只是一個檔案名，一般約定以。appcache結尾，檔案一般放在專案的根目錄下）

btw： mannifest這個檔案需要設定MIME-type為“text/cache-manifest”，這是必須的。你需要在伺服器上進行設定。

我們來看看manifest這個檔案（cache.appcache）應該怎麼寫

我從w3School找到了這些資料：

CACHE MANIFEST - 在此標題下列出的檔案將在首次下載後進行快取

NETWORK - 在此標題下列出的檔案需要與伺服器的連接，且不會被快取

FALLBACK - 在此標題下列出的檔案規定當頁面無法存取時的回退頁面（例如404 頁面）

cache.appcache檔案如下

# CACHE MANIFEST是必须的！
CACHE MANIFEST
/style.css
/logo.png
/app.js
# 不缓存的文件，永远不会被缓存，且离线时是不可用的
NETWORK:
login.js
# 可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK:
*
# 注释：获取不到资源时的备选路径，就跳转到指定页面
FALLBACK:
index.html 404.html

怎麼更新快取

如同文章開始時所說的那樣，瀏覽器發現html上有manifest檔時會先去請求cache.appcache文件，再依照manifest檔的內容來快取。具體的流程如下

線上情況下，如果是第一次存取應用，瀏覽器就會根據manifest檔案的內容下載對應的資源並且進行離線儲存。如果已經造訪過應用程式且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest文件，如果檔案沒有改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。

而離線情況下，瀏覽器就直接使用本地的快取。有沒有發現一個問題，如果我們更新程式碼了之後，瀏覽器還是使用了原來的快取怎麼辦。

最簡單粗暴的方式就是手動清除瀏覽器的緩存，當然很大程度在生產環境上是不會這樣處理的。

修改manifest的方式

以 “#” 開頭的是註解行，但也能滿足其他用途。應用程式的快取會在其 manifest 檔案更改時被更新。如果您編輯了一幅圖片，或修改了一個 JavaScript 函數，這些變更都不會重新快取。更新註解行中的日期和版本號碼是一種使瀏覽器重新快取檔案的方法。

以上是HTML5快取機制是什麼？怎麼更新快取的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5：網絡內容和設計的未來May 01, 2025 am 12:12 AM

H5（HTML5）將通過新元素和API提升網頁內容和設計。 1）H5增強了語義化標記和多媒體支持。 2）它引入了Canvas和SVG，豐富了網頁設計。 3）H5的工作原理是通過新標籤和API擴展HTML功能。 4）基本用法包括使用創建圖形，高級用法涉及WebStorageAPI。 5）開發者需注意瀏覽器兼容性和性能優化。

H5：網絡開發的新功能和功能Apr 29, 2025 am 12:07 AM

H5帶來了多項新功能和能力，極大提升了網頁的互動性和開發效率。 1.語義化標籤如、增強了SEO。 2.多媒體支持通過和標籤簡化了音視頻播放。 3.Canvas繪圖提供了動態圖形繪製工具。 4.本地存儲通過localStorage和sessionStorage簡化了數據存儲。 5.地理位置API便於開發基於位置的服務。

H5：HTML5的關鍵改進Apr 28, 2025 am 12:26 AM

HTML5帶來了五個關鍵改進：1.語義化標籤提升了代碼清晰度和SEO效果；2.多媒體支持簡化了視頻和音頻嵌入；3.表單增強簡化了驗證；4.離線與本地存儲提高了用戶體驗；5.畫布與圖形功能增強了網頁的可視化效果。

HTML5：標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等，提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage，支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性，簡化處理和驗證。