Web Workers

什么是Web Worker?

我们都知道HTML页面在执行script的时候是unresponsive的,直到script执行完成

而web worker是运行在后台的javascript,独立于其他的script,不影响性能.你可以做任何操作,而此时worker们在后台继续工作

所有主流浏览器都支持web worker,除了IE....(微笑)

---

1.先看看浏览器支不支持web worker

if(typeof(Worker)){
  console.log('support');
}else{
  console.log('No support');
}

恩,我不是用IE的哦

2.说正事,先创建一个web worker的js文件,里面写worker要做的事情,一般用于更耗费CPU资源的任务

var i=0;
function timedCount(){
  i=i+1;
  postMessage(i);//postMessage() 方法-它用于向 HTML 页面传回一段消息
  setTimeout('timedCount()',500);
}
timedCount();

3.回到你的html,先写两个按钮,预定义两个方法

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

4.接下里编写javascript代码

var w;
//写个开始worker的方法
function startWorker(){
  if(typeof(Worker)!=='undefined'){//判断浏览器支不支持
    if(typeof(w)=='undefined'){//判断是否存在worker,如不存在就新创建
      w=new Worker("workers.js");//引入你刚刚写的worker的js文件
    }
    //给web worker添加一个'onmessage'事件监听器
    w.onmessage=function(event){
      document.getElementById('result').innerHTML=event.data;
      //event.data 中存有来自 event.data 的数据
    }
  }else{
    document.getElementById("result").innerHTML="not support Web Workers...";
  }
}

//暂停worker的方法
function stopWorker(){
  w.terminate();//worker中的方法,用于终止worker工作
}

5.给你看看完整的代码

再看看引入的worker的js文件

然后看效果把!

workers会在后台帮你执行worker文件...

最后注意的是,由于worker是外部js文件,所以无法访问window'的对象,document对象,parent对象

---

web worker就说到这里,有更好的应用场景或者描述的方法,还是代码哪里可以优化,哪里有错误,欢迎指出!!共勉!