什么是 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();
05-13 10:29