簡介
什麼是web worker呢？從名字上就可以看出，web worker就是在web應用程式中使用的worker。這個worker是獨立於web主執行緒的，在後臺執行的執行緒。
web worker的優點就是可以將工作交給獨立的其他執行緒去做，這樣就不會阻塞主執行緒。
Web Workers的基本概念和使用
web workers是通過使用Worker(）來建立的。
Worker可以指定後臺執行的指令碼，並在指令碼執行完畢之後通常creator。
worker有一個建構函式如下：
Worker("path/to/worker/script")
我們傳入要執行指令碼的路徑，即可建立worker。
Workers中也可以建立新的Workers,前提是這些worker都是同一個origin。
我們看一下worker的定義：
interface Worker extends EventTarget, AbstractWorker {
onmessage: ((this: Worker, ev: MessageEvent) => any) | null;
onmessageerror: ((this: Worker, ev: MessageEvent) => any) | null;
postMessage(message: any, transfer: Transferable[]): void;
postMessage(message: any, options?: PostMessageOptions): void;
terminate(): void;
addEventListener<K extends keyof WorkerEventMap>(type: K, listener: (this: Worker, ev: WorkerEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof WorkerEventMap>(type: K, listener: (this: Worker, ev: WorkerEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
declare var Worker: {
prototype: Worker;
new(stringUrl: string | URL, options?: WorkerOptions): Worker;
};
可以看到Worker的建構函式可以傳入兩個引數，第一個引數可以是string也可以是URL，表示要執行的指令碼路徑。
第二個引數是WorkerOptions選項，表示worker的型別，名字和許可權相關的選項。
interface WorkerOptions {
credentials?: RequestCredentials;
name?: string;
type?: WorkerType;
}
除此之外，worker可以監聽onmessage和onmessageerror兩個事件。
提供了兩個方法：postMessage和terminate。
worker和主執行緒都可以通過postMessage來給對方傳送訊息，也可以用onmessage來接收對方傳送的訊息。
還可以新增和移除EventListener。
我們看一個使用worker的例子：
const first = document.querySelector('#number1');
const second = document.querySelector('#number2');
const result = document.querySelector('.result');
if (window.Worker) {
const myWorker = new Worker("worker.js");
first.onchange = function() {
myWorker.postMessage([first.value, second.value]);
console.log('Message posted to worker');
}
second.onchange = function() {
myWorker.postMessage([first.value, second.value]);
console.log('Message posted to worker');
}
myWorker.onmessage = function(e) {
result.textContent = e.data;
console.log('Message received from worker');
}
} else {
console.log('Your browser doesn\'t support web workers.')
}
上面的例子建立了一個woker，並向worker post了一個訊息。
再看一下worker.js的內容是怎麼樣的：
onmessage = function(e) {
console.log('Worker: Message received from main script');
const result = e.data[0] * e.data[1];
if (isNaN(result)) {
postMessage('Please write two numbers');
} else {
const workerResult = 'Result: ' + result;
console.log('Worker: Posting message back to main script');
postMessage(workerResult);
}
}
我們在主執行緒中向worker postmessage，在worker中通過onmessage監聽訊息，然後又在worker中post message，可以在main執行緒中通過onmessage來監聽woker傳送的訊息。
這樣就做到了一次完美的互動。
再看一下worker的相容性：
可以看到，基本上所有的瀏覽器都支援worker，不過有些瀏覽器只支援部分的方法。
如果想要立馬結束一個worker，我們可以使用terminate：
myWorker.terminate();
要想處理worker的異常，可以使用onerror來處理異常。
如果worker的script比較複雜，需要用到其他的script檔案，我們可以使用importScripts來匯入其他的指令碼：
importScripts(); /* imports nothing */
importScripts('foo.js'); /* imports just "foo.js" */
importScripts('foo.js', 'bar.js'); /* imports two scripts */
importScripts('//example.com/hello.js'); /* You can import scripts from other origins */
Web Workers的分類
Web Workers根據工作環境的不同，可以分為DedicatedWorker和SharedWorker兩種。
DedicatedWorker的Worker只能從建立該Woker的指令碼中訪問，而SharedWorker則可以被多個指令碼所訪問。
上面的例子中我們建立的worker就是DedicatedWorker。
怎麼建立sharedWorker呢?
var myWorker = new SharedWorker('worker.js');
SharedWorker有一個單獨的SharedWorker類，和dedicated worker不同的是SharedWorker是通過port物件來進行互動的。
我們看一個shared worker的例子：
var first = document.querySelector('#number1');
var second = document.querySelector('#number2');
var result1 = document.querySelector('.result1');
if (!!window.SharedWorker) {
var myWorker = new SharedWorker("worker.js");
first.onchange = function() {
myWorker.port.postMessage([first.value, second.value]);
console.log('Message posted to worker');
}
second.onchange = function() {
myWorker.port.postMessage([first.value, second.value]);
console.log('Message posted to worker');
}
myWorker.port.onmessage = function(e) {
result1.textContent = e.data;
console.log('Message received from worker');
console.log(e.lastEventId);
}
}
所有的postMessage和onmessage都是基於myWorker.port來的。
再看一下worker的程式碼：
onconnect = function(e) {
var port = e.ports[0];
port.onmessage = function(e) {
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
port.postMessage(workerResult);
}
}
worker也是通過port來進行通訊。
這裡我們使用了onconnect用來監聽父執行緒的onmessage事件或者start事件，這兩種事件都可以啟動一個SharedWorker。
再看一下sharedWorker的瀏覽器相容性：
可以看到，比worker的相容性要低很多，只有部分瀏覽器才支援這個高階特性。
worker和main thread之間的資料傳輸
我們知道worker和main thread之間是通過postMessage和onMessage進行互動的。這裡面涉及到了資料傳輸的問題。
實際上資料在worker和main thread之間是以拷貝的方式並且是以序列化的形式進行傳輸的。
本文作者：flydean程式那些事
本文連結： http://www.flydean.com/webworker-kickoff/
本文來源：flydean的部落格
歡迎關注我的公眾號:「程式那些事」最通俗的解讀，最深刻的乾貨，最簡潔的教程，眾多你不知道的小技巧等你來發現！