当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行

当网页运行比较复杂的效果时,网页主线程加载较慢,这时就需要使用web worker。

使用方法:

    postMessage:用于向html页面传回一段消息

    terminate:终止web worker,并释放浏览器/计算机资源

下面是一个计数代码实例:

    worker.html:

 <!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script src="worker.js"></script>
</head>
<body>
<div id="numDiv">0</div>
<button id="start">start</button>
<button id="stop">stop</button>
</body>
</html>   var numDiv;
var work=null;
window.onload = function(){numDiv = document.getElementById("numDiv");document.getElementById("start").onclick = function(){if(work){return;}work = new Worker("count.js");work.onmessage = function(e){numDiv.innerHTML = e.data;}document.getElementById("stop").onclick = function(){if(work){work.terminate();work = null;}}}
}

count.js(web worker的主要代码):

/*** Created by Administrator on 2015/5/6.*/
var countnum=0;
function ccount(){postMessage(countnum);countnum++;setTimeout(ccount,1000);
}
ccount();

wKiom1VKQKyiLC9VAADUMUffXy4442.jpg