站長資訊網(wǎng)在html5當(dāng)中引入了應(yīng)用程序緩存，這意味著web應(yīng)用可以進(jìn)行緩存，并且可以在沒有網(wǎng)絡(luò)連接的時候進(jìn)行訪問。
應(yīng)用緩存的優(yōu)勢
-
離線瀏覽，用戶可以在離線的時候瀏覽已經(jīng)加載并且緩存好的數(shù)據(jù)
-
加快加載速度。
-
減少服務(wù)器負(fù)載。
實現(xiàn)用緩存
如果啟用應(yīng)用程序緩存，需要在<html>標(biāo)簽當(dāng)中包含manifest屬性，manifest文件的建議擴(kuò)展名是:”.appcache”
manifest文件
manifest文件為我們提供了三種緩存的方式：
version n.n ：version表示當(dāng)前manifest的版本，當(dāng)version發(fā)生變化的時候，此時當(dāng)用戶再次加載的時候，會將CACHE標(biāo)簽下列出的所有文件重新下載一次。
– CACHE MANIFEST:在此標(biāo)題下列出的文件，將在首次下載后進(jìn)行緩存。
– NETWORK: 在此標(biāo)題下列出的文件需要與服務(wù)器的鏈接，且不會被緩存。
– FALLBACK: 在此標(biāo)題下列出的文件，規(guī)定訪問緩存失敗后，備用訪問的資源，第一個是訪問源，第二個是替換文件*.html /offline.html，例如404頁面。
緩存的應(yīng)用
這里我創(chuàng)建一個web工程，并且新建一個html文件：
index.html
<!DOCTYPE html><html manifest="index.appcache"> <head> <title>index.html</title> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head> <body> <h1>This is my HTML page</h1> </body></html>
style.css
@CHARSET "UTF-8";h1 { color: aqua;}
可以看到這里，我的頁面很簡單，并且引用了一個style.css樣式文件。并且在<html>標(biāo)簽當(dāng)中，指定了緩存文件index.appcache.
index.appcache 內(nèi)容如下：
CACHE MANIFEST#version 1.0CACHE:index.htmlcss/style.css
可以看到，這里我們使用CACHE類型的緩存，表示需要緩存index.html和css/style.css這兩個文件。此時打開服務(wù)器，瀏覽該網(wǎng)頁，在關(guān)閉服務(wù)器，會發(fā)現(xiàn)該網(wǎng)頁同樣可以訪問，此時按下F12，打開開發(fā)者選項，會發(fā)現(xiàn)有如下緩存： 
同時也可以使用NETWORK類型的緩存，來表示那些文件是需要聯(lián)網(wǎng)下載的，這里我將css/style.css文件寫入到NETWORK類型的緩存當(dāng)中。
CACHE MANIFEST#version 1.0CACHE:index.htmlNETWORK:css/style.css
首先需要手動清除一下之前緩存的記錄。然后打開服務(wù)器，瀏覽http://localhost:8080/html5cache/index.html，此時顯示效果如下： 
可以看到此時只是緩存了html頁面，并沒有緩存css/style.css文件，此時關(guān)閉服務(wù)器，再次刷新該頁面，效果如下： 
可以看到此時，就只是加載了html頁面，并么有加載css文件，所以h1標(biāo)簽的字體是默認(rèn)的。
更新緩存
如果需要更新緩存，比如這里我更改了html中的文字，此時再次訪問localhost:8080/html5cache/index.html 的時候，是不會加載最新的頁面文字的，這是因為瀏覽器默認(rèn)會到緩存中查找，如果緩存中有，則直接從緩存中取出，因此我們需要更新緩存文件”index.appcache”中的version即可，如下：
CACHE MANIFEST#version 1.1CACHE:css/style.cssindex.htmlNETWORK:FALLBACK:
這里，我將version更改了1.1，此時再次訪問該頁面的時候， 是會到服務(wù)其下載最新的頁面，說到這里，緩存的缺點就出來了，就是哪怕我一個頁面中只更新一行文字，但是當(dāng)我更改了”index.appcache”文件中的version值之后，就會重新將CACHE中定義的所有內(nèi)容，重新下載一次。
使用js自動更新緩存
另外，我們還可以使用applicationcache對象來自動更新緩存。如下：
<script type="text/javascript"> //添加頁面加載函數(shù) window.addEventListener('load', function(e) { //為applicationCache對象添加updateready事件 window.applicationCache.addEventListener('updateready', function(e) { //表示manifest中列舉的文件已經(jīng)重新下載并更新成功 if (window.applicationCache.status == window.applicationCache.UPDATEREADY) { //使用swapCache()方法更新到應(yīng)用程序中 window.applicationCache.swapCache(); if (confirm('A new version of this site is available. Load it?')) { //重新加載當(dāng)前頁面 window.location.reload(); } } else { //manifest文件沒有變化 console.log("manifest 沒有改變"); } }, false); }, false); </script>
applicationcache是window對象的直接子對象，該對象的事件列表如下： 
status 返回緩存的狀態(tài)
| 可選值 | 匹配常量 | 描述 |
|---|---|---|
| 0 | appCache.UNCACHED | 未緩存 |
| 1 | appCache.IDLE | 閑置 |
| 2 | appCache.CHECKING | 檢查中 |
| 3 | appCache.DOWNLOADING | 下載中 |
| 4 | appCache.UPDATEREADY | 已更新 |
| 5 | appCache.OBSOLETE | 失效 |
方法
| 方法名 | 匹配常量 |
|---|---|
| update() | 發(fā)起應(yīng)用程序緩存下載進(jìn)程 |
| abort() | 取消正在進(jìn)行的緩存下載 |
| swapcache() | 切換成本地最新的緩存環(huán)境 |
web workers
web workers是運(yùn)行在后臺的腳本，獨(dú)立于其他的腳本，不會影響頁面的性能。類似于android開發(fā)中的handler。將繁重耗時的計算放到web worker中來實現(xiàn)，然后將處理的結(jié)果返回給主UI線程來顯示。
web workers方法
-
postMessage() :用于向html頁面回傳一段消息。
-
terminate() :終止web workers，并且釋放計算機(jī)資源。
web workers簡單實現(xiàn)
下面使用web workers簡單實現(xiàn)一數(shù)字更新的demo：
新建一個web工程，創(chuàng)建index.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="index.js"></script></head><body> <p id="nump">0</p></body></html>
這里在index.html文件當(dāng)中引入了index.js文件。
index.js
var nump; window.onload = function(){ nump = document.getElementById("nump"); var work = new Worker("count.js"); work.onmessage = function(e) { //alert(e.data); nump.innerHTML = e.data; }; };
可以看到，這里講更新數(shù)據(jù)的具體操作，使用Worker來更新，在worker當(dāng)中加載了count.js文件來做一些耗時，復(fù)雜的計算。然后使用worker的onmessage回調(diào)方法，將count.js返回的結(jié)果重新顯示給nump。
count.js
var countNum = 0;function count(){ postMessage(countNum);//通過postMessage方法將計算結(jié)果回傳給調(diào)用者 countNum++; setTimeout(count,1000); } count();
count.js文件比較簡單，每隔一秒更新countNum的值，然后回傳給調(diào)用者，也就是這里的index.js
此時運(yùn)行效果如下： 
下面添加一個開始停止的控制按鈕：
<button id="start">start</button> <button id="stop">stop</button>
index.js
var nump;var work; window.onload = function(){ nump = document.getElementById("nump"); var start = document.getElementById("start"); var stop = document.getElementById("stop"); start.onclick = startWorker; stop.onclick = stopWorker; };function startWorker() { if (work) { //如果work存在，則直接返回 return; } else { work = new Worker("count.js"); work.onmessage = function(e) { nump.innerHTML = e.data; }; } }function stopWorker() { if (work) {//如果worker存在，則終止并且為其重新賦值 work.terminate(); work = null; } }
此時運(yùn)行效果如下： 
另外我們還可以通過navaigator對象的onLine屬性來判斷當(dāng)前瀏覽器是否在線，該屬性屬于只讀屬性，會返回boolean類型的值。
if(window.navigator.onLine) { //在線} else { //離線}
