| 一、webWorker之初體驗 |
在"setTimeout那些事兒"中，說到JavaScript是單線程。也就是同一時間只能做同一事情。
也好理解，作為瀏覽器腳本語言，如果JavaScript不是單線程，那么就有點棘手了。比如，與用戶交互或者對DOM進行操作時，在一個線程上修改某個DOM，另外的線程刪除DOM，這時瀏覽器該如何抉擇呢?
所以，JavaScript是單線程也是有背景的。
如下：
<!DOCTYPE html> <head> <title>singleThread</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> //添加到任務隊列中，待同步任務所處的‘執行棧’執行完畢，1秒后執行任務隊列中的這個匿名函數 setTimeout(function(){ console.log('come on'); },1000); //只要不關閉該alert，‘執行棧’就沒結束，從而也就不會進入到任務隊列中 alert('waiting'); </script> </body> </html>
但，HTML5引入了一個工作線程（webWorker）的概念。它允許開發人員編寫能夠長時間運行而不被用戶所中斷的后台程序，去執行事務或者邏輯，並同時保證頁面對用戶的響應。
簡而言之，就是允許JavaScript創建多個線程，但是子線程完全受主線程控制，且不得操作DOM。
從而，可以用webWorker來處理一些比較耗時的計算。
如下，主頁面：
<!DOCTYPE html> <head> <title>worker</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script> function init(){ //創建一個Worker對象，並向它傳遞將在新線程中執行的腳本url var worker = new Worker('worker.js'); //接收worker傳遞過來的數據 worker.onmessage = function(event){ document.getElementById('result').innerHTML+=event.data+"<br/>" ; }; }; </script> </head> <body onload = "init()"> <div id="result"></div> </body> </html>
下面是worker.js的內容:
var i = 0; function timedCount(){ for(var j = 0, sum = 0; j < 100; j++){ for(var i = 0; i < 100000000; i++){ sum+=i; }; }; //將得到的sum發送回主線程 postMessage(sum); }; //將執行timedCount前的時間，通過postMessage發送回主線程 postMessage('Before computing, '+new Date()); timedCount(); //結束timedCount后，將結束時間發送回主線程 postMessage('After computing, ' +new Date());
上面代碼執行的流程是：創建的worker對象，並用onmessage方法接收worker.js里面postMessage傳遞過來的數據(event.data)，並將數據追加到div#result中。
所以，執行上面的代碼結果如下：
圖一
待worker.js中的timedCount方法運算完后，執行postMessage操作，向主線程傳數據，得圖二。期間，並不影響主線程的運作。
圖二
| 二、webWorker之常用ＡＰＩ |
接下來，再來看看關於worker的常用API：
1、postMessage(data)
子線程與主線程之間互相通信使用方法，傳遞的data為任意值。
//worker = new Worker('url'); //worker.postMessage傳遞給子線程數據，對象 worker.postMessage({first:1,second:2}); //子線程中也可以使用postMessage，如傳遞字符串 postMessage(‘test’);
2、terminate()
主線程中終止worker，此后無法再利用其進行消息傳遞。注意：一旦terminate后，無法重新啟用，只能另外創建。
//worker = new Worker('url'); worker.terminate();
如，主頁面：
<!DOCTYPE html> <head> <title>worker</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script> function init(){ var worker = new Worker('worker.js'); //每隔100毫秒，向子線程傳遞{name: 'monkey'}信息 setInterval(function(){ worker.postMessage({name: 'monkey'}); },100); //當主線程worker收到來自子線程的消息后，觸發message事件 worker.onmessage = function(event){ document.getElementById('result').innerHTML+=event.data+"<br/>" ; //主線程使用terminate方法中斷與子線程來往，在瀏覽器中只能顯示一次event.data worker.terminate(); }; }; </script> </head> <body onload = "init()"> <div id="result"></div> </body> </html>
子線程worker.js代碼：
//當主線程發來信息后，觸發該message事件 onmessage = function(event){ //向主線程發送event.data.name信息 postMessage(event.data.name); };
3、message
當有消息發送時，觸發該事件。且，消息發送是雙向的，消息內容可通過data來獲取。
message使用，可見terminate中的demo
4、error
出錯處理。且錯誤消息可以通過e.message來獲取。
如下：
//worker = new Worker('url'); worker.onerror = function(e){ //打印出錯消息 console.log(e.message); //中斷與子線程的聯系 worker.terminate(); }
另：worker線程從上到下同步運行它的代碼，然后進入異步階段來對事件及計時器響應，如果worker注冊了message事件處理程序，只要其有可能觸發，worker就一直在內存中，不會退出，所以通信完畢后得手動在主線程中terminate或者子線程中close掉，但如果worker沒有監聽消息，那么當所有任務執行完畢（包括計數器）后，他就會退出。
| 三、worker上下文 |
先看下面這段代碼：
主頁面：
<!DOCTYPE html> <head> <title>worker</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script> function init(){ var worker = new Worker('worker.js'); //接收消息事件 worker.onmessage = function(event){ console.log(event.data); }; //錯誤信息事件 worker.onerror = function(e){ console.log('erro: ' + e.message); //終止線程 worker.terminate(); }; }; </script> </head> <body onload = "init()"> </body> </html>
worker.js
//window對象的alert方法 alert(1); onmessage = function(event){ //向主線程發送event.data.name信息 postMessage(event.data.name); };
執行上面代碼結果：
為什么會這樣呢？原因是alert為window對象的方法，所以會報錯undefined。
worker.js執行的上下文，與主頁面html執行時的上下文並不相同，最頂層的對象並不是window，woker.js執行的全局上下文，是個叫做WorkerGlobalScope的東東，所以無法訪問window、與window相關的DOM API，但是可以與setTimeout、setInterval等協作。
WorkerGlobalScope作用域下的常用屬性、方法如下：
1、self
我們可以使用 WorkerGlobalScope 的 self 屬性來或者這個對象本身的引用
2、location
location 屬性返回當線程被創建出來的時候與之關聯的 WorkerLocation 對象，它表示用於初始化這個工作線程的腳步資源的絕對 URL，即使頁面被多次重定向后，這個 URL 資源位置也不會改變。
3、close
關閉當前線程，與terminate作用類似
4、importScripts
我們可以通過importScripts()方法通過url在worker中加載庫函數
5、XMLHttpRequest
有了它，才能發出Ajax請求
6、setTimeout/setInterval以及addEventListener/postMessage
| 四、關於worker |
我們可以做什么：
1.可以加載一個JS進行大量的復雜計算而不掛起主進程，並通過postMessage，onmessage進行通信
2.可以在worker中通過importScripts(url)加載另外的腳本文件
3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest來發送請求
5.可以訪問navigator的部分屬性
局限性：
1.不能跨域加載JS
2.worker內代碼不能訪問DOM
3.各個瀏覽器對Worker的實現不大一致，例如FF里允許worker中創建新的worker,而Chrome中就不行
4.IE這個新特性