H5多線程開發：WebWorkers

做者：心葉
時間：2018-05-01 18:45

咱們都知道，瀏覽器執行js代碼是單線程的，當頁面腳步執行時，頁面是沒辦法響應別的的，直到腳步的結束，而這裏介紹的WebWorkers就能夠改變這一切。

WebWorkers是運行在後臺的js代碼，獨立於其餘腳本，不會影響頁面的性能。咱們能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時WebWorkers在後臺運行。

全部主流瀏覽器均支持 web worker，除了 Internet Explorer。

第一步：生成worker。

調用Worker()構造函數，指定一個要在worker線程內運行的腳本的URI，例子是當前頁面指定worker線程執行的腳步爲script-worker.js。

var myWorker = new Worker("script-worker.js");

在script-worker.js裏面咱們能夠執行額外的代碼，這些代碼的執行不會影響頁面去幹別的你想幹的事情，這聽起來很棒。

第二步：傳遞數據。

頁面能夠和worker交互傳遞數據，這樣worker在不影響頁面幹有意義的事情的狀況下能夠默默去計算，好了告訴一下頁面，使用這些數據。

//[主頁面代碼]
myWorker.postMessage("data-from-mainpage");

//[worker代碼]
onmessage = function (oEvent) {

    console.log("主頁面發送過來的數據是："+oEvent.data));
    
};

上面是【主頁面發送數據給worker腳本】的狀況，是的，你看見了很是親切的postMessage，好吧，我喜歡這個東西。

//[主頁面代碼]
 myWorker.onmessage = function (oEvent) {
 
     console.log("worker腳本發送過來的數據是："+oEvent.data));
     
 };
 
//[worker代碼]
postMessage("data-from-mainpage");

上面是【worker腳本發送數據給主頁面】的狀況，依舊很簡單，不過這些只是API，關鍵在於巧妙的使用纔是有益的。

此外，可能worker執行會出錯，主頁面經過:

myWorker.onerror=function(oEvent){};

能夠監聽worker發生錯誤。

第三步：重要幾點。

worker線程可以在不干擾UI的狀況下執行任務，所執行的JavaScript代碼徹底在另外一個做用域，與當前網頁中的代碼不共享做用域。

Worker的全局做用域中提供了importScripts()方法，接收一個或多個指向JavaScript文件的URL，加載過程都是異步進行。

importScripts()只會在您提供絕對URI的狀況下生效，執行過程也是異步的。

當咱們建立WebWorkers對象後，它會繼續監聽消息（即便在外部腳本完成以後）直到其被終止爲止，使用myWorker.terminate()方法能夠終止WebWorkers，並釋放瀏覽器/計算機資源。

第四步：重要限制。

1.沒法訪問DOM節點，沒法訪問全局變量或是全局函數，法調用alert()或者confirm之類的函數和沒法訪問window、document之類的瀏覽器全局變量；

2.不過Web Worker中的Javascript依然可使用setTimeout(),setInterval()之類的函數，也可使用XMLHttpRequest對象來作Ajax通訊。

例子代碼： https://github.com/yelloxing/...