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

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

云罗郡主

發布： 2019-01-04 10:45:17

原創

7394 人瀏覽過

這篇文章帶給大家的內容是關於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中文網其他相關文章！