本文主要是介绍HTML5——应用缓存与Web Workers，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、应用缓存
（1）什么是应用程序缓存：
HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网链接时进行访问
（2）应用缓存的优势：
a:离线浏览-用户可在应用离线时使用它们
b:速度-已缓存资源加载得更快
c:减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源
（3）实现缓存：
如需启用应用程序缓存，请在文档的<html>标签中包含manifest属性。
manifest文件的建议的文件扩展名是：“.appcache”
(4)Manifest文件：
a:CACHE MANIFEST-在此标题下列出的文件将在首次下载后进行缓存
b:NETWORK-在此标题下列出的文件需要与服务器的链接，且不会被缓存
c:FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）
<!DOCTYPE html><html manifest="index.appcache"><head lang="en"><meta charset="UTF-8"><title>appCache</title><link rel="stylesheet" href="style.css"></head><body><h1 class="h1">Hello HTML5!</h1></body></html>
style.css
.h1{background-color: yellow;}
index.appcache
CACHE MANIFESTCACHE:index.htmlindex.jsstyle.css
2、Web Workers
（1）什么是Web Worker？
web worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能
（2）方法：
postMessage()-它用于向HTML页面回传一段消息
terminate()-终止web worker，并释放浏览器/计算机资源
(3)事件：
onmessage
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>webWorker</title><script src="index.js"></script></head><body><div id="numDiv">0</div><button id="start">start</button><button id="stop">stop</button></body></html>
index.js
var numDiv;var work = null;var index = 0;window.onload = function () {numDiv = document.getElementById("numDiv");document.getElementById("start").onclick = startWorker;document.getElementById("stop").onclick = function(){if(work){index = numDiv.innerHTML;work.terminate();work = null;}}}function startWorker(){if(work){return;}work = new Worker("count.js");work.onmessage = function (e) {numDiv.innerHTML =parseInt(index)+parseInt(e.data);}}
count.js
var countNum=0;function count(){postMessage(countNum);countNum++;setTimeout(count,1000);}count();
这篇关于HTML5——应用缓存与Web Workers的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
