WebWorker是什么鬼？
前言
前端工程師們一定有過這樣的體驗，當一個頁面加載了大量的 js 文件時，用戶界面可能會短暫地“凍結”。這很好理解，因為 js 是單線程的語言。我們再走的極端點，一段 js 中出現了 while(){} 的死循環，這時再去點擊頁面的 DOM 元素，將不會觸發事件，事實上，這些異步的事件都排成了隊列，只等頁面的 js 渲染完后去執行（從setTimeout談JavaScript運行機制），而此時渲染進入了死循環，所以出現了用戶界面被“凍結”的現象。
而實際的開發中，雖然不會出現類似的死循環，但是大量的 js 渲染還是會影響用戶體驗的，此時我們希望這段耗時的 js ***能異步去執行，setTimeout 是一個好的方法，但是 H5 提供了更好的辦法，Web Worker! Web Worker 規范通過讓 Javascript 在后臺運行解決了這個問題。瀏覽器實現 Web Worker 規范的方式有很多種，可以使用線程、后臺進程或者運行在其他處理器核心上的進程，等等。具體的實現細節其實沒有那么重要，重要的是開發人員現在可以放心地運行 Javascript，而不必擔心會影響用戶體驗了。
既然 Worker 是 H5 大家庭的，那么 ie6 之輩就可以一邊去了，詳細的瀏覽器兼容性可以參考 http://caniuse.com/#search=worker
如果沒有 Worker
我們來看這樣一段代碼：
- <div style='width:100px;height:100px;background-color:red'></div>
- <script>
- document.querySelector('div').onclick = function() {
- console.log('hello world');
- };
- function fibonacci(n) {
- return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);
- }
- console.log(fibonacci(36));
- </script>
頁面上寫了一個 div，然后監聽了它的 click 事件，并且在 js 中需要計算斐波那契數列的第 36 項，并將它輸出。這樣的頁面用戶體驗是非常差的，如果 fibonacci 不執行完，div 的 click 事件是無法及時響應的，而遞歸求解斐波那契數列項是相當耗時的！這樣一段耗時的 js 代碼，交給 worker 來做正合適！
祭出大殺器 Worker
Worker 的使用方法很簡單。
實例化 Worker 對象并傳入要執行的 Javascript 文件名就可以創建一個新的 Web Worker：
- var worker = new Worker('worker.js');
這段代碼會導致瀏覽器下載 worker.js，但只有 Worker 接收到消息才會實際執行文件中的代碼。要給 Worker 傳遞消息，可以使用 postMessage() 方法，比如我要告訴 Worker 需要求斐波那契數列的第 36 項：
- worker.postMessage(36);
我們來看看 Worker 是怎么接收消息的。當頁面在 worker 對象上調用 postMessage()時，數據會以異步方式傳遞給 worker，進而觸發 worker 中的 message 事件。為了處理來自頁面的數據，同樣也要創建一個 onmessage 事件處理程序。（worker.js 代碼）
- self.onmessage = function(event) {
- var data = event.data;
- console.log(fibonacci(data));
- };
- function fibonacci(n) {
- return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);
- }
頁面可以傳數據給 Worker，Worker 當然也可以回傳，頁面通過 message 事件進行監聽：
- worker.onmessage = function(event) {
- var data = event.data;
- };
Worker 是通過 message 和 error 事件與頁面通信的。來自 Worker 的數據保存在 event.data 中。Worker 不能完成給定的任務時會觸發 error 事件。具體來說，Worker 內部的 Javascript 在執行過程中只要遇到錯誤，就會觸發 error 事件。發生 error 事件時，事件對象中包含三個屬性：filename、lineno 和 message，分別表示錯誤的文件名、代碼行號和完整的錯誤信息：
- worker.onerror = function(event) {
- console.log(event.filename, event.lineno, event.message);
- };
我們建議使用 worker 時***寫上 error 事件，就像使用 ajax 時總要寫上獲取失敗時的補救操作一樣。
完整代碼：
html 文件：
- <div style='width:100px;height:100px;background-color:red'></div>
- <script>
- document.querySelector('div').onclick = function() {
- console.log('hello world');
- };
- var worker = new Worker('worker.js');
- worker.postMessage(36);
- worker.onmessage = function(event) {
- var data = event.data;
- console.log(data)
- };
- worker.onerror = function(event) {
- console.log(event.filename, event.lineno, event.message);
- };
- </script>
worker.js 文件：
- self.onmessage = function(event) {
- var data = event.data;
- var ans = fibonacci(data);
- this.postMessage(ans);
- };
- function fibonacci(n) {
- return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);
- }
簡單小結：
WEB主線程:
- 通過 var worker = new Worker(url) 加載一個 js 文件來創建一個 worker，同時返回一個 worker 實例。
- 通過 worker.postMessage(data) 方法來向 worker 發送數據。
- 綁定 worker.onmessage 方法來接收 worker 發送過來的數據。
- 可以使用 worker.terminate() 來終止一個 worker 的執行。
worker新線程：
- 綁定 onmessage 方法來接收主線程發送過來的數據。
- 通過 postMessage(data) 方法來向主線程發送數據。
- 可以使用 self.close() 來終止一個 worker 的執行。
Worker 其他
關于 Web Worker，最重要的是要知道它所執行的 Javascript 代碼完全在另一個作用域中，與當前網頁中的代碼不共享作用域。在 Web Worker 中，同樣有一個全局對象（worker 對象本身，this 和 self 引用的都是 worker 對象本身）和其他對象以及方法。Web Worker 中的代碼不能訪問 DOM。那么 Worker 里的代碼能訪問哪些對象，擁有哪些方法？
- 最小化 的navigator 對象，包括 onLine、appName、appVersion、userAgent 和 platform 屬性
- 只讀的 location 對象
- setTimeout()、setInterval()、clearTimeout()、clearInterval() 方法
- XMLHttpRequest 構造函數
任何時候都能中止 Worker。在 worker.js 中，我們可以用 self.close()方法，而在頁面中，我們可以用 worker.terminal()方法，這時 error 和 message 事件也不會觸發了。
