什么是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就说到这里,有更好的应用场景或者描述的方法,还是代码哪里可以优化,哪里有错误,欢迎指出!!共勉!
