当在 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();
转载于:https://blog.51cto.com/9484767/1643674