[toc] # 簡介 什麼是web worker呢？從名字上就可以看出，web worker就是在web應用程式中使用的worker。這個worker是獨立於web主執行緒的，在後臺執行的執行緒。 web worker的優點就是可以將工作交給獨立的其他執行緒去做，這樣就不會阻塞主執行緒。 # Web Workers的基本概念和使用 web workers是通過使用Worker(）來建立的。 Worker可以指定後臺執行的指令碼，並在指令碼執行完畢之後通常creator。 worker有一個建構函式如下： ~~~js Worker("path/to/worker/script") ~~~ 我們傳入要執行指令碼的路徑，即可建立worker。 Workers中也可以建立新的Workers,前提是這些worker都是同一個origin。 我們看一下worker的定義： ~~~js 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(type: K, listener: (this: Worker, ev: WorkerEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(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的型別，名字和許可權相關的選項。 ~~~js interface WorkerOptions { credentials?: RequestCredentials; name?: string; type?: WorkerType; } ~~~ 除此之外，worker可以監聽onmessage和onmessageerror兩個事件。 提供了兩個方法：postMessage和terminate。 worker和主執行緒都可以通過postMessage來給對方傳送訊息，也可以用onmessage來接收對方傳送的訊息。 還可以新增和移除EventListener。 我們看一個使用worker的例子： ~~~js 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的內容是怎麼樣的： ~~~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： ~~~js myWorker.terminate(); ~~~ 要想處理worker的異常，可以使用onerror來處理異常。 如果worker的script比較複雜，需要用到其他的script檔案，我們可以使用importScripts來匯入其他的指令碼： ~~~js 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呢? ~~~js var myWorker = new SharedWorker('worker.js'); ~~~ SharedWorker有一個單獨的SharedWorker類，和dedicated worker不同的是SharedWorker是通過port物件來進行互動的。 我們看一個shared worker的例子： ~~~js 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的程式碼： ~~~js 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/]( http://www.flydean.com/webworker-kickoff/) > > 本文來源：flydean的部落格 > > 歡迎關注我的公眾號:「程式那些事」最通俗的解讀，最深刻的乾貨，最簡潔的教程，眾多你不知道的小技巧等你來發現！