HTML5新特性之Web Worker

時間 2019-11-08

標籤 html5 html 特性 web worker 欄目 HTML5 简体版

原文原文鏈接

一、概述

JavaScript語言採用的是單線程模型，也就是說，全部任務排成一個隊列，一次只能作一件事。隨着電腦計算能力的加強，這一點帶來很大的不便，沒法充分發揮JavaScript的潛能。龍其考慮到，File API容許JavaScript讀取本地文件，就更加如此了。javascript

Web Worker的目就，就是爲JavaScript創造多線程環境，容許主線程將一些任務分配給子線程。在主線程運行的同時，子線程在後臺運行，二者互不干擾。等到子線程完成計算任務，再把結果返回給主線程。所以，每個子線程就好像一個「工人」（worker），默默地完成本身的工做。html

Web Worker有如下幾個特色：html5

同域限制：子線程加載的腳本文件，必須與主線程的腳本文件在同一個域。
DOM限制：子線程沒法讀限網頁的DOM對象，即document、window、parent這些對象，子線程都沒法獲得。（可是，navigator對象和location對象能夠得到。）
腳本限制：子線程沒法讀取網頁的全局變量和函數，也不能執行alert和confirm方法，不過能夠執行setInterval和setTimeout，以及使用XMLHttpRequest對象發出AJAX請求。
文件限制：子線程沒法讀取本地文件，即子線程沒法打開本機的文件系統（file://），它所加載的腳本，必須來自網絡。

使用以前，檢查瀏覽器是否支持這個API。支持的瀏覽器包括 IE 10+、Firefox 3.6+、Safari 4.0+、Chrome 和 Opera 11，可是手機瀏覽器還不支持。java

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

二、新建和啓動子線程

在主線程內部，採用new命令調用Worker方法，能夠新建一個子線程。web

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

Worker方法的參數是一個腳本文件，這個文件就是子線程所要完成的任務，上面代碼中是work.js。因爲子線程不能讀取本地文件系統，因此這個腳本文件必須來自網絡端。若是下載沒有成功，好比出現404錯誤，這個子線程就會默默地失敗。api

子線程新建以後，並無啓動，必需等待主線程調用postMessage方法，即發出信號以後纔會啓動。數組

worker.postMessage('hello world');

postMessage方法的參數，就是主線程傳給子線程的信號。它便可以是一個字符串，也能夠是一個對象。瀏覽器

worker.postMessage({method: 'each', args: ['work']});

三、子線程的事件監聽

在子線程內，必須有一個回調函數，監聽message事件。網絡

//File: work.js

self.addEventListener('message', function(e) {

    self.postMessage('You said: ' + e.data);

}, false);

self表明子線程自身，self.addEventListener表示對子線程的message事件指定回調函數（直接指定onmessage屬性的值也能夠）。回調函數的參數是一個事件對象，它的data屬性包含主線程發來的信號。self.postMessage則表示，子線程向主線程發送一個信號。多線程

根據主線程發來的不一樣的信號值，子線程能夠調用不一樣的方法。

// File: work.js

self.addEventListener('message', function(e) {
    var method = e.data.method;
    var args = e.data.args;

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

四、主線程的事件監聽

主線程也必須指定message事件的回調函數，監聽子線程發來的信號。

// File: main.js
worker.addEventListener('message', function(e) {
    console.log(e.data);
}, false);

五、錯誤處理

主線程能夠監聽子線程是否發生錯誤。若是發生錯誤，會觸發主線程的error事件。

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

// or
worker.addEventListener('error', function(e) {
    console.log(e);
}, false);

六、關閉子線程

使用完畢後，爲了節省系統資源，咱們必須在主線程調用terminate方法，手動關閉子線程。

worker.terminate();

也能夠子線程內部關閉自身。

self.close();

七、主線程與子線程的數據通訊

主線程與子線程之間的通訊內容，能夠是文本，也能夠是對象。須要注意的是，這種通訊是拷貝關係，便是傳值而不是傳址，子線程對通訊內容的修改，不會影響到主線程。事實上，瀏覽器內部的運行機制是，先將通訊內容串行化，而後把串行化後的字符串發給子線程，後者再將它還原。

主線程也子線程這間也能夠交換二進制數據，好比File、Blob、ArrayBuffer等對象，也能夠在線程之間發送。

可是，用拷貝方式發送二進制數據，會形成性能問題。好比，主線程向子線程發送一個500MB文件，默認狀況下瀏覽器會生成一個原文件的拷貝。爲了解決這個問題，JavaScript容許主線程把二進制數據直接轉移給子線程，可是一旦轉移，主線程就沒法再使用這些二進制數據了，這是爲了防止出現多個線程同時修改數據的麻煩局面。這種轉移數據的方法，叫作Transferable Objects。

若是要使用該方法，postMessage方法的最後一個參數必須是一個數組，用來指定前面發送的哪些值能夠被轉移給子線程。

worker.postMessage(arrayBuffer, [arrayBuffer]);

八、同頁面的Web Worker

一般狀況下，子線程載入的是一個單獨的JavaScript文件，可是也能夠載入與主線程在同一個網頁的代碼。假設網頁代碼以下：

<!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('#workere').textContent]);

這裏須要把代碼看成二進制數據讀取，因此使用Blob接口。而後，這個二進制對象轉爲URL，再經過這個URL建立worker。

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

var worker = new Worker(url);

部署事件監聽代碼。

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>

能夠看到，主線程和子線程的代碼都在同一個網頁上面。

上面所講的Web Worker都是專屬於某個網頁的，當該網頁關閉，worker就自動結束。除此以外，還有一種共享式的Web Worker，容許多個瀏覽器窗口共享同一個worker，只有當全部窗口關閉，它纔會結束。這種共享式的Worker用SharedWorker對象來建立，由於適用場合很少，這裏就省略了。