在HTML5当中引入了应用程序缓存，这意味着web应用可以进行缓存，并且可以在没有网络连接的时候进行访问。
应用缓存的优势
离线浏览，用户可以在离线的时候浏览已经加载并且缓存好的数据
加快加载速度。
减少服务器负载。
实现用缓存
如果启用应用程序缓存，需要在<html>标签当中包含manifest属性，manifest文件的建议扩展名是:”.appcache”
manifest文件
manifest文件为我们提供了三种缓存的方式：
version n.n ：version表示当前manifest的版本，当version发生变化的时候，此时当用户再次加载的时候，会将CACHE标签下列出的所有文件重新下载一次。
- CACHE MANIFEST:在此标题下列出的文件，将在首次下载后进行缓存。
- NETWORK: 在此标题下列出的文件需要与服务器的链接，且不会被缓存。
- FALLBACK: 在此标题下列出的文件，规定访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.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>1234567891012345678910
style.css
@CHARSET "UTF-8";h1 { color: aqua;}12341234
可以看到这里，我的页面很简单，并且引用了一个style.css样式文件。并且在<html>标签当中，指定了缓存文件index.appcache.
index.appcache 内容如下：
CACHE MANIFEST#version 1.0CACHE:index.htmlcss/style.css1234512345
可以看到，这里我们使用CACHE类型的缓存，表示需要缓存index.html和css/style.css这两个文件。此时打开服务器，浏览该网页，在关闭服务器，会发现该网页同样可以访问，此时按下F12，打开开发者选项，会发现有如下缓存：
同时也可以使用NETWORK类型的缓存，来表示那些文件是需要联网下载的，这里我将css/style.css文件写入到NETWORK类型的缓存当中。
CACHE MANIFEST#version 1.0CACHE:index.htmlNETWORK:css/style.css1234567812345678
首先需要手动清除一下之前缓存的记录。然后打开服务器，浏览http://localhost:8080/html5cache/index.html，此时显示效果如下：
可以看到此时只是缓存了html页面，并没有缓存css/style.css文件，此时关闭服务器，再次刷新该页面，效果如下：
可以看到此时，就只是加载了html页面，并么有加载css文件，所以h1标签的字体是默认的。
更新缓存
如果需要更新缓存，比如这里我更改了html中的文字，此时再次访问http://localhost:8080/html5cache/index.html 的时候，是不会加载最新的页面文字的，这是因为浏览器默认会到缓存中查找，如果缓存中有，则直接从缓存中取出，因此我们需要更新缓存文件”index.appcache”中的version即可，如下：
CACHE MANIFEST#version 1.1CACHE:css/style.cssindex.htmlNETWORK:FALLBACK:1234567891012345678910
这里，我将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>12345678910111213141516171819202122232425261234567891011121314151617181920212223242526
applicationcache是window对象的直接子对象，该对象的事件列表如下：
status 返回缓存的状态
| 可选值 | 匹配常量 | 描述 |
|---|---|---|
| 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方法
postMessage() :用于向html页面回传一段消息。
terminate() :终止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> <div id="numDiv">0</div></body></html>12345678910111234567891011
这里在index.html文件当中引入了index.js文件。
index.js
var numDiv; window.onload = function(){ numDiv = document.getElementById("numDiv"); var work = new Worker("count.js"); work.onmessage = function(e) { //alert(e.data); numDiv.innerHTML = e.data; }; };123456789123456789
可以看到，这里讲更新数据的具体操作，使用Worker来更新，在worker当中加载了count.js文件来做一些耗时，复杂的计算。然后使用worker的onmessage回调方法，将count.js返回的结果重新显示给numDiv。
count.js
var countNum = 0;function count(){ postMessage(countNum);//通过postMessage方法将计算结果回传给调用者 countNum++; setTimeout(count,1000); } count();12345671234567
count.js文件比较简单，每隔一秒更新countNum的值，然后回传给调用者，也就是这里的index.js
此时运行效果如下：
下面添加一个开始停止的控制按钮：
<button id="start">start</button> <button id="stop">stop</button>1212
index.js
var numDiv;var work; window.onload = function(){ numDiv = document.getElementById("numDiv"); 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) { numDiv.innerHTML = e.data; }; } }function stopWorker() { if (work) {//如果worker存在，则终止并且为其重新赋值 work.terminate(); work = null; } }1234567891011121314151617181920212223242526272812345678910111213141516171819202122232425262728
此时运行效果如下：
另外我们还可以通过navaigator对象的onLine属性来判断当前浏览器是否在线，该属性属于只读属性，会返回boolean类型的值。
if(window.navigator.onLine) { //在线} else { //离线}1234512345
转载至：http://blog.csdn.net/mockingbirds/article/details/48412967
本文转自 风雨萧条 博客，原文链接：http://blog.51cto.com/1095221645/1900170 如需转载请自行联系原作者
