当在 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