什么是 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();