HTML5緩存機(jī)制是什么意思-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司是一家業(yè)務(wù)范圍包括IDC托管業(yè)務(wù),網(wǎng)頁(yè)空間、主機(jī)租用、主機(jī)托管，四川、重慶、廣東電信服務(wù)器租用,川西大數(shù)據(jù)中心，成都網(wǎng)通服務(wù)器托管,成都服務(wù)器租用,業(yè)務(wù)范圍遍及中國(guó)大陸、港澳臺(tái)以及歐美等多個(gè)國(guó)家及地區(qū)的互聯(lián)網(wǎng)數(shù)據(jù)服務(wù)公司。

背景

離線(xiàn)緩存是HTML5提供的新功能。利用HTML5提供的離線(xiàn)緩存功能可以將站點(diǎn)的一些常用的文件緩存到本地，在沒(méi)有網(wǎng)絡(luò)的情況下依舊可以訪(fǎng)問(wèn)緩存的頁(yè)面?？梢员痪彺娴奈募?lèi)型有很多，包括但不限于html,css,js,靜態(tài)圖片資源等。

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

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

瀏覽器支持

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

Manifest

要想在頁(yè)面上使用離線(xiàn)緩存，只需要在頁(yè)面的html 加入一個(gè)manifest屬性，使用方法如下。

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

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

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

我們來(lái)看一下manifest這個(gè)文件（cache.appcache）應(yīng)該怎么寫(xiě)

我從w3School找到了這些資料 ：

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

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

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

cache.appcache文件如下

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

怎么更新緩存

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

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

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

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

修改manifest的方式

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前名稱(chēng)：HTML5緩存機(jī)制是什么意思-創(chuàng)新互聯(lián)
當(dāng)前URL：http://bm7419.com/article26/giejg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷(xiāo)、網(wǎng)站排名、服務(wù)器托管、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司

廣告

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

營(yíng)銷(xiāo)型網(wǎng)站建設(shè)