在html5當中引入了應用程式快取，這意味著web應用程式可以進行緩存，並且可以在沒有網路連線的時候進行存取。
離線瀏覽，使用者可以在離線的時候瀏覽已經載入並且快取好的資料
- 加快載入速度。 #減少伺服器負載。 manifest檔案的建議副檔名是:”.appcache”manifest檔
- manifest檔為我們提供了三種快取的方式：
version n.n ：version表示目前manifest的版本，當version發生變化的時候，此時當使用者再次載入的時候，會將CACHE標籤下列出的所有檔案重新下載一次。
- CACHE MANIFEST:在此標題下列出的文件，將在首次下載後進行快取。
- NETWORK: 在此標題下列出的檔案需要與伺服器的鏈接，且不會被快取。
- F- ALL
BACK: 在此標題下列出的文件，規定存取快取失敗後，備用存取的資源，第一個是存取來源，第二個是替換文件*.html /offline.html，例如
404頁面 。
快取的應用程式
這裡我建立一個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樣式檔。並且在
標籤當中，指定了快取檔案index.appcache.
index.appcache 內容如下：CACHE MANIFEST#version 1.0CACHE:index.htmlcss/style.css
登入後複製
同時也可以使用NETWORK類型的緩存，來表示那些檔案是需要連網下載的，這裡我將css/style.css檔案寫入到NETWORK類型的快取當中。
CACHE MANIFEST#version 1.0CACHE:index.htmlNETWORK:css/style.css
登入後複製
首先需要手動清除一下先前快取的記錄。然後開啟伺服器，瀏覽http://localhost:8080/html5cache/index.html，此時顯示效果如下：
可以看到此時只是快取了html頁面，並沒有快取css/ style.css文件，此時關閉伺服器，再次刷新該頁面，效果如下：
可以看到此時，就只是加載了html頁面，並麼有加載css文件，所以h1標籤的字體是預設的。
快取
如果需要更新緩存，例如這裡我更改了html中的文字，此時再次訪問localhost:8080/html5cache/index.html 的時候，是不會載入最新的頁面文字的，這是因為瀏覽器預設會到快取中查找，如果快取中有，則直接從快取中取出，因此我們需要更新快取檔案”index.appcache”中的version即可，如下：
CACHE MANIFEST#version 1.1CACHE:css/style.cssindex.htmlNETWORK:FALLBACK:
登入後複製
這裡，我將version更改了1.1，此時再次訪問該頁面的時候， 是會到服務其下載最新的頁面，說到這裡，緩存的缺點就出來了，就是即使我一個頁面中只更新一行文字，但是當我更改了”index.appcache”文件中的version值之後，就會重新將CACHE中定義的所有內容，重新下載一次。
使用js自動更新快取
另外，我們也可以使用applicationcache
物件
來自動更新快取。如下：
<script type="text/javascript">
//添加页面加载函数
window.addEventListener('load', function(e) {
//为applicationCache对象添加updateready事件
window.applicationCache.addEventListener('updateready', function(e) {
//表示manifest中列举的文件已经重新下载并更新成功
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
//使用swapCache()方法更新到应用程序中
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
//重新加载当前页面
window.location.reload();
}
} else { //manifest文件没有变化
console.log("manifest 没有改变");
}
}, false);
}, false); </script>登入後複製
applicationcache是
window物件
的直接子對象，該物件的事件清單如下：
| 可选值 | 匹配常量 | 描述 |
|---|
| 0 | appCache.UNCACHED | 未缓存 |
| 1 | appCache.IDLE | 闲置 |
| 2 | appCache.CHECKING | 检查中 |
| 3 | appCache.DOWNLOADING | 下载中 |
| 4 | appCache.UPDATEREADY | 已更新 |
| 5 | appCache.OBSOLETE | 失效 |
方法
| 方法名 | 匹配常量 |
|---|
| update() | 发起应用程序缓存下载进程 |
| abort() | 取消正在进行的缓存下载 |
| swapcache() | 切换成本地最新的缓存环境 |
web workers
web workers是运行在后台的脚本，独立于其他的脚本，不会影响页面的性能。类似于android开发中的handler。将繁重耗时的计算放到web worker中来实现，然后将处理的结果返回给主UI线程来显示。
web workers方法
web workers简单实现
下面使用web workers简单实现一数字更新的demo：
新建一个web工程，创建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文件当中引入了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;
};
};登入後複製
可以看到，这里讲更新数据的具体操作，使用Worker来更新，在worker当中加载了count.js文件来做一些耗时，复杂的计算。然后使用worker的onmessage回调方法，将count.js返回的结果重新显示给nump。
count.js
var countNum = 0;function count(){
postMessage(countNum);//通过postMessage方法将计算结果回传给调用者
countNum++;
setTimeout(count,1000);
}
count();登入後複製
count.js文件比较简单，每隔一秒更新countNum的值，然后回传给调用者，也就是这里的index.js
此时运行效果如下：
下面添加一个开始停止的控制按钮：
<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;
}
}登入後複製
此时运行效果如下：
另外我们还可以通过navaigator对象的onLine属性来判断当前浏览器是否在线，该属性属于只读属性，会返回boolean类型的值。
if(window.navigator.onLine) { //在线} else { //离线}登入後複製
以上是html5應用程式快取與Web Workers的圖文詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
