什么是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就說到這里,有更好的應用場景或者描述的方法,還是代碼哪里可以優化,哪里有錯誤,歡迎指出!!共勉!
