HTML5的離線存儲(chǔ)

Joyven 發(fā)布于2019-08-30 15:55 / 3245人閱讀

摘要：的離線存儲(chǔ)使用以及工作原理解答使用方式在頁(yè)面頭部中加入一個(gè)的屬性就可以的書寫方式，如下表示需要離線存儲(chǔ)的資源列表表示在中列出的資源只有在在線情況下才能訪問(wèn)，不會(huì)被離線存儲(chǔ)，若和中都有這個(gè)資源則會(huì)離線存儲(chǔ)，因?yàn)榈膬?yōu)先級(jí)更高表示如果第一個(gè)資源訪

HTML5的離線存儲(chǔ)使用以及工作原理解答？

使用方式：在頁(yè)面頭部中加入一個(gè)manifest的屬性就可以

...

cache.manifest的書寫方式，如下：

CACHE MANIFEST
#v0.11

CACHE: //表示需要離線存儲(chǔ)的資源列表
js/app.js
css/style.css

NETWORK://表示在NETWORK中列出的資源只有在在線情況下才能訪問(wèn)，不會(huì)被離線存儲(chǔ)，若CACHE和NETWORK中都有這個(gè)資源則會(huì)離線存儲(chǔ)，因?yàn)镃ACHE的優(yōu)先級(jí)更高
resourse/logo.png

FALLBACK://表示如果第一個(gè)資源訪問(wèn)失敗，就用第二個(gè)資源來(lái)替換他，以下表示的就是訪問(wèn)根目錄失敗后，就用offline.html來(lái)替換它
/ /offline.html

工作原理：
在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會(huì)請(qǐng)求manifest文件
如果是第一次訪問(wèn)app，那么瀏覽器會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并進(jìn)行離線處理
如果訪問(wèn)的app資源已經(jīng)離線存儲(chǔ)了，則瀏覽器會(huì)使用離線的資源加載頁(yè)面
同時(shí)對(duì)比新的manifest與舊的manifest文件，如果沒(méi)有發(fā)生改變，則不做任何操作，若改變了，
則重新下載manifest并對(duì)離線資源進(jìn)行存儲(chǔ)

HTML5有了哪些優(yōu)化？

HTML5新特性：主要是增強(qiáng)了圖形渲染，影音，數(shù)據(jù)存儲(chǔ)，多任務(wù)處理等能
1.canvas - 繪畫
2.video.audio - 媒介回放
3.localStorage - 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
4.article.footer.header.nav.section - 語(yǔ)意化更好的內(nèi)容元素
5.calendar.date.time.email.url.search - 表單控制
6.webworker專用線程.websocket通信.geolocation地理定位 - 新的技術(shù)
移除的元素：
1.basefont默認(rèn)字體
2.big大字體
3.center水平居中
4.font字體標(biāo)簽
5.strike中橫線
6.tt文本等寬
7.u下劃線
處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題?
1.實(shí)現(xiàn)標(biāo)簽被識(shí)別
通過(guò)document.createElement(tagName)方法即可讓瀏覽器識(shí)別新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還可以為新標(biāo)簽添加CSS樣式
2.javascript解決方案
使用Html5shim，在head中調(diào)用以下代碼：

趣事

今天也是要加油的一天鴨
今天聽(tīng)到了一個(gè)很新奇的概念
叫做時(shí)間粒度，我的理解中，它是一個(gè)時(shí)間單位，時(shí)間顆粒
有些人的時(shí)間粒度是5分鐘，15分鐘，1個(gè)小時(shí)，也有的人是半天，一天
時(shí)間粒度的大小與你的專業(yè)度掛鉤
比爾蓋茨的時(shí)間粒度是5分鐘
王健林的時(shí)間粒度是15分鐘
有一次王健林去參加記者的采訪，但是記者遲到了三分鐘，
這時(shí)王健林當(dāng)即離開(kāi)了，后來(lái)記者說(shuō)，他很不近人情
但其實(shí)，對(duì)于時(shí)間粒度是15分鐘的人來(lái)說(shuō)，一分鐘都很寶貴.
希望自己也能珍惜時(shí)間去進(jìn)步，畢竟，長(zhǎng)大后的時(shí)間過(guò)的實(shí)在太快了