Web Worker（JavaScript多線程）

2021-09-15 15:20 更新

概述

JavaScript語言采用的是單線程模型，也就是說，所有任務排成一個隊列，一次只能做一件事。隨著電腦計算能力的增強，這一點帶來很大的不便，無法充分發(fā)揮JavaScript的潛力。尤其考慮到，F(xiàn)ile API允許JavaScript讀取本地文件，就更是如此了。

Web Worker的目的，就是為JavaScript創(chuàng)造多線程環(huán)境，允許主線程將一些任務分配給子線程。在主線程運行的同時，子線程在后臺運行，兩者互不干擾。等到子線程完成計算任務，再把結果返回給主線程。因此，每一個子線程就好像一個“工人”（worker），默默地完成自己的工作。

普通的Wek Worker，只能與創(chuàng)造它們的主進程通信。還有另一類Shared worker，能被所有同源的進程獲取（比如來自不同的瀏覽器窗口、iframe窗口和其他Shared worker）。本節(jié)不涉及這一類的worker進程。

Web Worker有以下幾個特點：

  • 同域限制。子線程加載的腳本文件，必須與主線程的腳本文件在同一個域。

  • DOM限制。子線程無法讀取網(wǎng)頁的DOM對象，即document、window、parent這些對象，子線程都無法得到。（但是，navigator對象和location對象可以獲得。）

  • 腳本限制。子線程無法讀取網(wǎng)頁的全局變量和函數(shù)，也不能執(zhí)行alert和confirm方法，不過可以執(zhí)行setInterval和setTimeout，以及使用XMLHttpRequest對象發(fā)出AJAX請求。

  • 文件限制。子線程無法讀取本地文件，即子線程無法打開本機的文件系統(tǒng)（file://），它所加載的腳本，必須來自網(wǎng)絡。

使用之前，檢查瀏覽器是否支持這個API。支持的瀏覽器包括IE10、Firefox (從3.6版本開始)、Safari (從4.0版本開始)、Chrome 和 Opera 11，但是手機瀏覽器還不支持。

if (window.Worker) {
  // 支持
} else {
  // 不支持
}

新建和啟動子線程

主線程采用new命令，調(diào)用Worker構造函數(shù)，可以新建一個子線程。

var worker = new Worker('work.js');

Worker構造函數(shù)的參數(shù)是一個腳本文件，這個文件就是子線程所要完成的任務，上面代碼中是work.js。由于子線程不能讀取本地文件系統(tǒng)，所以這個腳本文件必須來自網(wǎng)絡端。如果下載沒有成功，比如出現(xiàn)404錯誤，這個子線程就會默默地失敗。

子線程新建之后，并沒有啟動，必需等待主線程調(diào)用postMessage方法，即發(fā)出信號之后才會啟動。postMessage方法的參數(shù)，就是主線程傳給子線程的信號。它可以是一個字符串，也可以是一個對象。

worker.postMessage("Hello World");
worker.postMessage({method: 'echo', args: ['Work']});

子線程的事件監(jiān)聽

在子線程內(nèi)，必須有一個回調(diào)函數(shù)，監(jiān)聽message事件。

/* File: work.js */

self.addEventListener('message', function(e) {
  self.postMessage('You said: ' + e.data);
}, false);

self代表子線程自身，self.addEventListener表示對子線程的message事件指定回調(diào)函數(shù)（直接指定onmessage屬性的值也可）。回調(diào)函數(shù)的參數(shù)是一個事件對象，它的data屬性包含主線程發(fā)來的信號。self.postMessage則表示，子線程向主線程發(fā)送一個信號。

根據(jù)主線程發(fā)來的不同的信號值，子線程可以調(diào)用不同的方法。

/* File: work.js */

self.onmessage = function(event) {
  var method = event.data.method;
  var args = event.data.args;

  var reply = doSomething(args);
  self.postMessage({method: method, reply: reply});
};

主線程的事件監(jiān)聽

主線程也必須指定message事件的回調(diào)函數(shù)，監(jiān)聽子線程發(fā)來的信號。

/* File: main.js */

worker.addEventListener('message', function(e) {
    console.log(e.data);
}, false);

錯誤處理

主線程可以監(jiān)聽子線程是否發(fā)生錯誤。如果發(fā)生錯誤，會觸發(fā)主線程的error事件。

worker.onerror(function(event) {
  console.log(event);
});

// or

worker.addEventListener('error', function(event) {
  console.log(event);
});

關閉子線程

使用完畢之后，為了節(jié)省系統(tǒng)資源，我們必須在主線程調(diào)用terminate方法，手動關閉子線程。

worker.terminate();

也可以子線程內(nèi)部關閉自身。

self.close();

主線程與子線程的數(shù)據(jù)通信

前面說過，主線程與子線程之間的通信內(nèi)容，可以是文本，也可以是對象。需要注意的是，這種通信是拷貝關系，即是傳值而不是傳址，子線程對通信內(nèi)容的修改，不會影響到主線程。事實上，瀏覽器內(nèi)部的運行機制是，先將通信內(nèi)容串行化，然后把串行化后的字符串發(fā)給子線程，后者再將它還原。

主線程與子線程之間也可以交換二進制數(shù)據(jù)，比如File、Blob、ArrayBuffer等對象，也可以在線程之間發(fā)送。

但是，用拷貝方式發(fā)送二進制數(shù)據(jù)，會造成性能問題。比如，主線程向子線程發(fā)送一個500MB文件，默認情況下瀏覽器會生成一個原文件的拷貝。為了解決這個問題，JavaScript允許主線程把二進制數(shù)據(jù)直接轉移給子線程，但是一旦轉移，主線程就無法再使用這些二進制數(shù)據(jù)了，這是為了防止出現(xiàn)多個線程同時修改數(shù)據(jù)的麻煩局面。這種轉移數(shù)據(jù)的方法，叫做Transferable Objects。

如果要使用該方法，postMessage方法的最后一個參數(shù)必須是一個數(shù)組，用來指定前面發(fā)送的哪些值可以被轉移給子線程。

worker.postMessage(arrayBuffer, [arrayBuffer]);
window.postMessage(arrayBuffer, targetOrigin, [arrayBuffer]);

同頁面的Web Worker

通常情況下，子線程載入的是一個單獨的JavaScript文件，但是也可以載入與主線程在同一個網(wǎng)頁的代碼。假設網(wǎng)頁代碼如下：

<!DOCTYPE html>
    <body>
        <script id="worker" type="app/worker">

            addEventListener('message', function() {
                postMessage('Im reading Tech.pro');
            }, false);
        </script>
    </body>
</html>

我們可以讀取頁面中的script，用worker來處理。

var blob = new Blob([document.querySelector('#worker').textContent]);

這里需要把代碼當作二進制對象讀取，所以使用Blob接口。然后，這個二進制對象轉為URL，再通過這個URL創(chuàng)建worker。

var url = window.URL.createObjectURL(blob);

var worker = new Worker(url);

部署事件監(jiān)聽代碼。

worker.addEventListener('message', function(e) {
   console.log(e.data);
}, false);

最后，啟動worker。

worker.postMessage('');

整個頁面的代碼如下：

<!DOCTYPE html>
    <body>
        <script id="worker" type="app/worker">

            addEventListener('message', function() {
                postMessage('Work done!');
            }, false);

        </script>

        <script>
            (function() {

                var blob = new Blob([document.querySelector('#worker').textContent]);

                var url = window.URL.createObjectURL(blob);

                var worker = new Worker(url);

                worker.addEventListener('message', function(e) {
                    console.log(e.data);
                }, false);

                worker.postMessage('');
            })();
        </script>
    </body>
</html>

可以看到，主線程和子線程的代碼都在同一個網(wǎng)頁上面。

上面所講的Web Worker都是專屬于某個網(wǎng)頁的，當該網(wǎng)頁關閉，worker就自動結束。除此之外，還有一種共享式的Web Worker，允許多個瀏覽器窗口共享同一個worker，只有當所有網(wǎng)口關閉，它才會結束。這種共享式的Worker用SharedWorker對象來建立，因為適用場合不多，這里就省略了。

參考鏈接

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號