HTML5緩存機制是什么意思

小編給大家分享一下HTML5緩存機制是什么意思，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比如東網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式如東網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋如東地區(qū)。費用合理售后完善，10年實體公司更值得信賴。

背景

離線緩存是HTML5提供的新功能。利用HTML5提供的離線緩存功能可以將站點的一些常用的文件緩存到本地，在沒有網(wǎng)絡(luò)的情況下依舊可以訪問緩存的頁面?？梢员痪彺娴奈募愋陀泻芏啵ǖ幌抻趆tml,css,js,靜態(tài)圖片資源等。

事實上，離線緩存不僅僅在沒有網(wǎng)絡(luò)的情況下會被使用，當(dāng)有網(wǎng)絡(luò)的情況下，本地緩存過的文件依舊會被優(yōu)先使用。有網(wǎng)絡(luò)的情況下，瀏覽器會返回200,

離線緩存有很多好處。第一，可以有效提高用戶體驗，節(jié)約用戶流量。第二，可以提高頁面加載速度，已緩存的資源加載的更快。第三，可以減少服務(wù)器負載，瀏覽器將只從服務(wù)器下載更新過或者更改過的資源。

瀏覽器支持

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

Manifest

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

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

當(dāng)瀏覽器加載頁面的時候，發(fā)現(xiàn)html上面擁有屬性mannifest,就會去請求cache.appcache文件（ps:這只是一個文件名，一般約定以。appcache結(jié)尾，文件一般放在項目的根目錄下）

btw： mannifest這個文件需要配置 MIME-type為 “text/cache-manifest”，這是必須的。你需要在服務(wù)器上進行配置。

我們來看一下manifest這個文件（cache.appcache）應(yīng)該怎么寫

我從w3School找到了這些資料：

CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進行緩存

NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會被緩存

FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時的回退頁面（比如 404 頁面）

cache.appcache文件如下

# CACHE MANIFEST是必須的！
CACHE MANIFEST
/style.css
/logo.png
/app.js
# 不緩存的文件，永遠不會被緩存，且離線時是不可用的
NETWORK:
login.js
# 可以使用星號來指示所有其他資源/文件都需要因特網(wǎng)連接：
NETWORK:
*
# 注釋：獲取不到資源時的備選路徑，就跳轉(zhuǎn)到指定頁面
FALLBACK:
index.html 404.html

怎么更新緩存

如同文章開始時說的那樣，瀏覽器發(fā)現(xiàn)html上有manifest文件時會先去請求cache.appcache文件，再根據(jù)manifest文件的內(nèi)容進行緩存。具體的流程如下

在線情況下，如果是第一次訪問應(yīng)用，瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲。如果已經(jīng)訪問過應(yīng)用并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。

而離線情況下，瀏覽器就直接使用本地的緩存。有沒有發(fā)現(xiàn)一個問題，如果我們更新代碼了之后，瀏覽器還是使用了原來的緩存怎么辦。

最簡單粗暴的方式就是手動清除瀏覽器的緩存，這當(dāng)然很大程度在生產(chǎn)環(huán)境上是不會這樣處理的。

修改manifest的方式

以 “#” 開頭的是注釋行，但也可滿足其他用途。應(yīng)用的緩存會在其 manifest 文件更改時被更新。如果您編輯了一幅圖片，或者修改了一個 JavaScript 函數(shù)，這些改變都不會被重新緩存。更新注釋行中的日期和版本號是一種使瀏覽器重新緩存文件的辦法。

看完了這篇文章，相信你對HTML5緩存機制是什么意思有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞標(biāo)題：HTML5緩存機制是什么意思
當(dāng)前網(wǎng)址：http://muchs.cn/article44/pphhee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站排名、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、建站公司、做網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容