【JavaScript 教程】瀏覽器模型—Web Worker
作者 |?阮一峰
1、概述
2、基本用法
2.1、主線程
var worker = new Worker('work.js');
worker.postMessage('Hello World');
worker.postMessage({method: 'echo', args: ['Work']});
worker.onmessage = function (event) {
doSomething(event.data);
}
function doSomething() {
// 執(zhí)行任務(wù)
worker.postMessage('Work done!');
}
worker.terminate();
2.2、Worker 線程
self.addEventListener('message', function (e) {
self.postMessage('You said: ' + e.data);
}, false);
上面代碼中，self代表子線程自身，即子線程的全局對象。因此，等同于下面兩種寫法。
// 寫法一
this.addEventListener('message', function (e) {
this.postMessage('You said: ' + e.data);
}, false);
// 寫法二
addEventListener('message', function (e) {
postMessage('You said: ' + e.data);
}, false);
除了使用self.addEventListener()指定監(jiān)聽函數(shù)，也可以使用self.onmessage指定。監(jiān)聽函數(shù)的參數(shù)是一個事件對象，它的data屬性包含主線程發(fā)來的數(shù)據(jù)。self.postMessage()方法用來向主線程發(fā)送消息。
根據(jù)主線程發(fā)來的數(shù)據(jù)，Worker 線程可以調(diào)用不同的方法，下面是一個例子。
self.addEventListener('message', function (e) {
var data = e.data;
switch (data.cmd) {
case 'start':
self.postMessage('WORKER STARTED: ' + data.msg);
break;
case 'stop':
self.postMessage('WORKER STOPPED: ' + data.msg);
self.close(); // Terminates the worker.
break;
default:
self.postMessage('Unknown command: ' + data.msg);
};
}, false);
上面代碼中，self.close()用于在 Worker 內(nèi)部關(guān)閉自身。
2.3、Worker 加載腳本
Worker 內(nèi)部如果要加載其他腳本，有一個專門的方法importScripts()。
importScripts('script1.js');
該方法可以同時加載多個腳本。
importScripts('script1.js', 'script2.js');
2.4、錯誤處理
主線程可以監(jiān)聽 Worker 是否發(fā)生錯誤。如果發(fā)生錯誤，Worker 會觸發(fā)主線程的error事件。
worker.onerror(function (event) {
console.log([
'ERROR: Line ', event.lineno, ' in ', event.filename, ': ', event.message
].join(''));
});
// 或者
worker.addEventListener('error', function (event) {
// ...
});
Worker 內(nèi)部也可以監(jiān)聽error事件。
2.5、關(guān)閉 Worker
使用完畢，為了節(jié)省系統(tǒng)資源，必須關(guān)閉 Worker。
// 主線程
worker.terminate();
// Worker 線程
self.close();
3、數(shù)據(jù)通信
前面說過，主線程與 Worker 之間的通信內(nèi)容，可以是文本，也可以是對象。需要注意的是，這種通信是拷貝關(guān)系，即是傳值而不是傳址，Worker 對通信內(nèi)容的修改，不會影響到主線程。
事實上，瀏覽器內(nèi)部的運行機制是，先將通信內(nèi)容串行化，然后把串行化后的字符串發(fā)給 Worker，后者再將它還原。
主線程與 Worker 之間也可以交換二進制數(shù)據(jù)，比如 File、Blob、ArrayBuffer 等類型，也可以在線程之間發(fā)送。下面是一個例子。
// 主線程
var uInt8Array = new Uint8Array(new ArrayBuffer(10));
for (var i = 0; i < uInt8Array.length; ++i) {
uInt8Array[i] = i * 2; // [0, 2, 4, 6, 8,...]
}
worker.postMessage(uInt8Array);
// Worker 線程
self.onmessage = function (e) {
var uInt8Array = e.data;
postMessage('Inside worker.js: uInt8Array.toString() = ' + uInt8Array.toString());
postMessage('Inside worker.js: uInt8Array.byteLength = ' + uInt8Array.byteLength);
};
但是，拷貝方式發(fā)送二進制數(shù)據(jù)，會造成性能問題。比如，主線程向 Worker 發(fā)送一個 500MB 文件，默認情況下瀏覽器會生成一個原文件的拷貝。
為了解決這個問題，JavaScript 允許主線程把二進制數(shù)據(jù)直接轉(zhuǎn)移給子線程，但是一旦轉(zhuǎn)移，主線程就無法再使用這些二進制數(shù)據(jù)了，這是為了防止出現(xiàn)多個線程同時修改數(shù)據(jù)的麻煩局面。
這種轉(zhuǎn)移數(shù)據(jù)的方法，叫做Transferable Objects。這使得主線程可以快速把數(shù)據(jù)交給 Worker，對于影像處理、聲音處理、3D 運算等就非常方便了，不會產(chǎn)生性能負擔。
如果要直接轉(zhuǎn)移數(shù)據(jù)的控制權(quán)，就要使用下面的寫法。
// Transferable Objects 格式
worker.postMessage(arrayBuffer, [arrayBuffer]);
// 例子
var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);
4、同頁面的 Web Worker
通常情況下，Worker 載入的是一個單獨的 JavaScript 腳本文件，但是也可以載入與主線程在同一個網(wǎng)頁的代碼。
html>
<body>
<script id="worker" type="app/worker">
addEventListener('message', function () {
postMessage('some message');
}, false);
script>
body>
html>
上面是一段嵌入網(wǎng)頁的腳本，注意必須指定