HTML5的離線存儲

時間 2019-12-06

標籤 html5 html 離線存儲欄目 HTML5 简体版

原文原文鏈接

HTML5的離線存儲使用以及工做原理解答？

使用方式：在頁面頭部中加入一個manifest的屬性就能夠javascript

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

cache.manifest的書寫方式，以下：css

CACHE MANIFEST
#v0.11

CACHE: //表示須要離線存儲的資源列表
js/app.js
css/style.css

NETWORK://表示在NETWORK中列出的資源只有在在線狀況下才能訪問，不會被離線存儲，若CACHE和NETWORK中都有這個資源則會離線存儲，由於CACHE的優先級更高
resourse/logo.png

FALLBACK://表示若是第一個資源訪問失敗，就用第二個資源來替換他，如下表示的就是訪問根目錄失敗後，就用offline.html來替換它
/ /offline.html

工做原理：
在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件
若是是第一次訪問app，那麼瀏覽器會根據manifest文件的內容下載相應的資源並進行離線處理
若是訪問的app資源已經離線存儲了，則瀏覽器會使用離線的資源加載頁面
同時對比新的manifest與舊的manifest文件，若是沒有發生改變，則不作任何操做，若改變了，
則從新下載manifest並對離線資源進行存儲html

HTML5有了哪些優化？

HTML5新特性：主要是加強了圖形渲染，影音，數據存儲，多任務處理等能
1.canvas - 繪畫
2.video.audio - 媒介回放
3.localStorage - 長期存儲數據，瀏覽器關閉後數據不丟失
4.article.footer.header.nav.section - 語意化更好的內容元素
5.calendar.date.time.email.url.search - 表單控制
6.webworker專用線程.websocket通訊.geolocation地理定位 - 新的技術
移除的元素：
1.basefont默認字體
2.big大字體
3.center水平居中
4.font字體標籤
5.strike中橫線
6.tt文本等寬
7.u下劃線
處理HTML5新標籤的瀏覽器兼容問題?
1.實現標籤被識別
經過document.createElement(tagName)方法便可讓瀏覽器識別新標籤，瀏覽器支持新標籤後，還能夠爲新標籤添加CSS樣式
2.javascript解決方案
使用Html5shim，在head中調用如下代碼：html5

<!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

趣事

今天也是要加油的一天鴨
今天聽到了一個很新奇的概念
叫作時間粒度，個人理解中，它是一個時間單位，時間顆粒
有些人的時間粒度是5分鐘，15分鐘，1個小時，也有的人是半天，一天
時間粒度的大小與你的專業度掛鉤
比爾蓋茨的時間粒度是5分鐘
王健林的時間粒度是15分鐘
有一次王健林去參加記者的採訪，可是記者遲到了三分鐘，
這時王健林立即離開了，後來記者說，他很不近人情
但其實，對於時間粒度是15分鐘的人來講，一分鐘都很寶貴.
但願本身也能珍惜時間去進步，畢竟，長大後的時間過的實在太快了java