Html5 Worker

Web Workers 是 HTML5 提供的一個javascript多線程解決方案，我們可以将一些大計算量的代碼交由web Worker運作而不當機使用者界面。

1. 如何使用Worker
   • 首頁面
     1. 通過在首頁面的js中建立 Worker執行個體來建立新線程.
     2. 通過postMessage(data)啟動線程，并傳遞參數。
     3. 通過onmessage(data)回調函數接收資料，并在頁面呈現。
     4. 可通過 terminate() 方法終止線程,被終止的Worker對象不能被重新開機或重用。

     //首頁面
     var worker = new Worker("js/worker.js"); //建立執行個體同時必須傳入需要在新線程中執行的代碼路徑
     worker.postMessage(num);    //傳遞參數并啟動線程
     worker.onmessage = function(event){     //線程結束之後回調
             console.log(event.data);
             document.getElementById("sum").innerHTML = event.data;
         }
                

   • worker.js頁面
     1. 通過onmessage(data) 等待響應首頁面的調用。
     2. 實作運算
     3. 将運算結果通過postMessage(data)發送回首頁面，觸發首頁面onmessage回調

        onmessage = function(event){ //響應首頁面調用，并通過參數接收首頁面傳遞的資料 var sum = fibonacci(event.data); console.log(event); postMessage(sum); //将運算結果發送至首頁面，并觸發回調 };

2. 檢測可用性

   檢測浏覽器是否支援Worker

   if(typeof(Worker)!=="undefined"){
       //浏覽器支援Worker
   }else{
       //浏覽器不支援支援Worker
   }
              

3. 限制與支援
   • 限制
     1. Web Worker無法通路DOM節點；
     2. Web Worker無法通路全局變量或是全局函數；
     3. Web Worker無法調用alert()或者confirm之類的函數；
     4. Web Worker無法通路window、document之類的浏覽器全局變量；
   • 支援
     1. 可以加載一個JS進行大量的複雜計算而不挂起主程序，并通過postMessage，onmessage進行通信
     2. 可以在worker中通過importScripts(url)加載另外的腳本檔案
     3. 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
     4. 可以使用XMLHttpRequest來發送請求
     5. 可以通路navigator的部分屬性
4. 案例
   1. fibonacci 計算
   2. 仿搶票系統