溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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緩存機制是什么意思有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
