什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。
Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。
为了让后台程序更好的执行，在HTML5中设计了Web Worker技术。Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的，一旦前面的脚本花费时间过长，后面的程序就会因长期得不到响应而使用户页面操作出现异常。
示例：后台计数
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Web worker</title> <meta charset="utf-8"> <style> </style> </head> <body> <p>计数：<output id="result"></output></p> <button onclick="startWorker()">开始Worker</button> <button onclick="stopWorker()">停止Worker</button> </body> <script> var w; function startWorker(){ if(typeof(Worker)!=="undefined"){ if(typeof(w)=="undefined"){ w=new Worker("demo_worker.js"); } w.onmessage=function(event){//监听worker后台脚本的postMessage方法 document.getElementById("result").innerHTML=event.data; } }else{ document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker(){
if(w!=undefined){
w.terminate();
}
}
</script> </html>
demo_woker.js
var i=0; function timedCount(){ i=i+1; postMessage(i);//使用postMeassage()方法传递给网页数据 setTimeout(() => { timedCount(); }, 1000); } timedCount();