HTML5中的Web Worker

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