over 2 years ago

什麼是Web Worker?,它就是個運行在後台的Javascript,獨立於其它Script,並且不會影響效能,但它不能影響Dom、並不能訪問windows、Document、parent等物件。

Worker 主要的用處在避免重度 CPU 運算的任務阻礙到 UI 執行緒運行。

建立Worker

首先我們來建立worker,並且該獨立的scriptwork.js,並且在worker建立onmessage監聽器,當work.js有執行postMessage(),則會觸發。

var worker = new Worker('work.js');
worker.onmessage = function(e){
     console.log(e.data);
}

下面這段程式碼為work.js,以下只是段簡單的兩秒後觸發postMessage()並回傳一段文字回去。

(fucntion(){
    setTimeout(function(){
        postMessage('This work I spend 2s');
    },2000);
})();

兩秒後執行結果就為。

This work I spend 2s

在Web Worker中載入Javascript

Worker裡面如果要載入Javascript,則需要使用importScripts( "fileName.js" ),下列程式碼為使用範例。

importScripts( "work2.js" ) 
var work2Obj = work2Obj; 

(function(){
    console.log(work2Obj.taskName);
    setTimeout(function(){
    self.postMessage('This work , I spend 2 s ');
    },2000);
})()

work2.js,如下程式碼。

var work2Obj = {
    taskName:"work2"
}

Web Worker的限制

有幾點要web worker的限制需要注意一下。

  • 不能跨域加載Js。
  • Worker不能訪問windows、Document、parent等物件。
  • 各瀏覽器對Worker的實現不太一樣。

參考資料

← Jquery的Promise之when與then(pipe) CSS-Box Model觀念 →
 
comments powered by Disqus