1、概述
JavaScript語言采用的是單線程模型，也就是說，所有任務排成一個隊列，一次只能做一件事。隨着電腦計算能力的增強，這一點帶來很大的不便，無法充分發揮JavaScript的潛能。龍其考慮到，File API允許JavaScript讀取本地文件，就更加如此了。
Web Worker的目就，就是為JavaScript創造多線程環境，允許主線程將一些任務分配給子線程。在主線程運行的同時，子線程在后台運行，兩者互不干擾。等到子線程完成計算任務，再把結果返回給主線程。因此，每一個子線程就好像一個“工人”（worker），默默地完成自己的工作。
Web Worker有以下幾個特點：
- 同域限制：子線程加載的腳本文件，必須與主線程的腳本文件在同一個域。
- 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，但是手機瀏覽器還不支持。
if (window.Worker) { // 支持 } else { // 不支持 }
2、新建和啟動子線程
在主線程內部，采用new命令調用Worker方法，可以新建一個子線程。
var worker = new Worker('work.js');
Worker方法的參數是一個腳本文件，這個文件就是子線程所要完成的任務，上面代碼中是work.js。由於子線程不能讀取本地文件系統，所以這個腳本文件必須來自網絡端。如果下載沒有成功，比如出現404錯誤，這個子線程就會默默地失敗。
子線程新建之后，並沒有啟動，必需等待主線程調用postMessage方法，即發出信號之后才會啟動。
worker.postMessage('hello world');
postMessage方法的參數，就是主線程傳給子線程的信號。它即可以是一個字符串，也可以是一個對象。
worker.postMessage({method: 'each', args: ['work']});
3、子線程的事件監聽
在子線程內，必須有一個回調函數，監聽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);
4、主線程的事件監聽
主線程也必須指定message事件的回調函數，監聽子線程發來的信號。
// File: main.js worker.addEventListener('message', function(e) { console.log(e.data); }, false);
5、錯誤處理
主線程可以監聽子線程是否發生錯誤。如果發生錯誤，會觸發主線程的error事件。
worker.onerror(function(e) { console.log(e); }); // or worker.addEventListener('error', function(e) { console.log(e); }, false);
6、關閉子線程
使用完畢后，為了節省系統資源，我們必須在主線程調用terminate方法，手動關閉子線程。
worker.terminate();
也可以子線程內部關閉自身。
self.close();
7、主線程與子線程的數據通信
主線程與子線程之間的通信內容，可以是文本，也可以是對象。需要注意的是，這種通信是拷貝關系，即是傳值而不是傳址，子線程對通信內容的修改，不會影響到主線程。事實上，瀏覽器內部的運行機制是，先將通信內容串行化，然后把串行化后的字符串發給子線程，后者再將它還原。
主線程也子線程這間也可以交換二進制數據，比如File、Blob、ArrayBuffer等對象，也可以在線程之間發送。
但是，用拷貝方式發送二進制數據，會造成性能問題。比如，主線程向子線程發送一個500MB文件，默認情況下瀏覽器會生成一個原文件的拷貝。為了解決這個問題，JavaScript允許主線程把二進制數據直接轉移給子線程，但是一旦轉移，主線程就無法再使用這些二進制數據了，這是為了防止出現多個線程同時修改數據的麻煩局面。這種轉移數據的方法，叫做Transferable Objects。
如果要使用該方法，postMessage方法的最后一個參數必須是一個數組，用來指定前面發送的哪些值可以被轉移給子線程。
worker.postMessage(arrayBuffer, [arrayBuffer]);
8、同頁面的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對象來創建，因為適用場合不多，這里就省略了。
9、參考鏈接
[1] Matt West, Using Web Worker to Speed-Up Your JavaScript Applications
[2] Eric Bidelman, The Basics of Web Workers
[3] Eric Bidelman, Transferable Objects: Lightning Fast!
[4] Jesse Cravens, Web Worker Patterns
[5] Bipin Joshi, 7 Things You Need To Know About Web Workers
[6] ruanyf, Web Worker