前言

前端工程師們一定有過這樣的體驗(yàn)，當(dāng)一個(gè)頁面加載了大量的 js 文件時(shí)，用戶界面可能會(huì)短暫地“凍結(jié)”。這很好理解，因?yàn)?js 是單線程的語言。我們?cè)僮叩臉O端點(diǎn)，一段 js 中出現(xiàn)了 while(){} 的死循環(huán)，這時(shí)再去點(diǎn)擊頁面的 DOM 元素，將不會(huì)觸發(fā)事件，事實(shí)上，這些異步的事件都排成了隊(duì)列，只等頁面的 js 渲染完后去執(zhí)行（從setTimeout談JavaScript運(yùn)行機(jī)制），而此時(shí)渲染進(jìn)入了死循環(huán)，所以出現(xiàn)了用戶界面被“凍結(jié)”的現(xiàn)象。

而實(shí)際的開發(fā)中，雖然不會(huì)出現(xiàn)類似的死循環(huán)，但是大量的 js 渲染還是會(huì)影響用戶體驗(yàn)的，此時(shí)我們希望這段耗時(shí)的 js ***能異步去執(zhí)行，setTimeout 是一個(gè)好的方法，但是 H5 提供了更好的辦法，Web Worker! Web Worker 規(guī)范通過讓 Javascript 在后臺(tái)運(yùn)行解決了這個(gè)問題。瀏覽器實(shí)現(xiàn) Web Worker 規(guī)范的方式有很多種，可以使用線程、后臺(tái)進(jìn)程或者運(yùn)行在其他處理器核心上的進(jìn)程，等等。具體的實(shí)現(xiàn)細(xì)節(jié)其實(shí)沒有那么重要，重要的是開發(fā)人員現(xiàn)在可以放心地運(yùn)行 Javascript，而不必?fù)?dān)心會(huì)影響用戶體驗(yàn)了。

既然 Worker 是 H5 大家庭的，那么 ie6 之輩就可以一邊去了，詳細(xì)的瀏覽器兼容性可以參考 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> 

頁面上寫了一個(gè) div，然后監(jiān)聽了它的 click 事件，并且在 js 中需要計(jì)算斐波那契數(shù)列的第 36 項(xiàng)，并將它輸出。這樣的頁面用戶體驗(yàn)是非常差的，如果 fibonacci 不執(zhí)行完，div 的 click 事件是無法及時(shí)響應(yīng)的，而遞歸求解斐波那契數(shù)列項(xiàng)是相當(dāng)耗時(shí)的！這樣一段耗時(shí)的 js 代碼，交給 worker 來做正合適！

祭出大殺器 Worker

Worker 的使用方法很簡(jiǎn)單。

實(shí)例化 Worker 對(duì)象并傳入要執(zhí)行的 Javascript 文件名就可以創(chuàng)建一個(gè)新的 Web Worker：

var worker = new Worker('worker.js'); 

這段代碼會(huì)導(dǎo)致瀏覽器下載 worker.js，但只有 Worker 接收到消息才會(huì)實(shí)際執(zhí)行文件中的代碼。要給 Worker 傳遞消息，可以使用 postMessage() 方法，比如我要告訴 Worker 需要求斐波那契數(shù)列的第 36 項(xiàng)：

worker.postMessage(36); 

我們來看看 Worker 是怎么接收消息的。當(dāng)頁面在 worker 對(duì)象上調(diào)用 postMessage()時(shí)，數(shù)據(jù)會(huì)以異步方式傳遞給 worker，進(jìn)而觸發(fā) worker 中的 message 事件。為了處理來自頁面的數(shù)據(jù)，同樣也要?jiǎng)?chuàng)建一個(gè) 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); 
} 

頁面可以傳數(shù)據(jù)給 Worker，Worker 當(dāng)然也可以回傳，頁面通過 message 事件進(jìn)行監(jiān)聽：

worker.onmessage = function(event) { 
  var data = event.data; 
}; 

Worker 是通過 message 和 error 事件與頁面通信的。來自 Worker 的數(shù)據(jù)保存在 event.data 中。Worker 不能完成給定的任務(wù)時(shí)會(huì)觸發(fā) error 事件。具體來說，Worker 內(nèi)部的 Javascript 在執(zhí)行過程中只要遇到錯(cuò)誤，就會(huì)觸發(fā) error 事件。發(fā)生 error 事件時(shí)，事件對(duì)象中包含三個(gè)屬性：filename、lineno 和 message，分別表示錯(cuò)誤的文件名、代碼行號(hào)和完整的錯(cuò)誤信息：

worker.onerror = function(event) { 
  console.log(event.filename, event.lineno, event.message); 
}; 

我們建議使用 worker 時(shí)***寫上 error 事件，就像使用 ajax 時(shí)總要寫上獲取失敗時(shí)的補(bǔ)救操作一樣。

完整代碼：

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); 
} 

簡(jiǎn)單小結(jié)：

WEB主線程:

1. 通過 var worker = new Worker(url) 加載一個(gè) js 文件來創(chuàng)建一個(gè) worker，同時(shí)返回一個(gè) worker 實(shí)例。
2. 通過 worker.postMessage(data) 方法來向 worker 發(fā)送數(shù)據(jù)。
3. 綁定 worker.onmessage 方法來接收 worker 發(fā)送過來的數(shù)據(jù)。
4. 可以使用 worker.terminate() 來終止一個(gè) worker 的執(zhí)行。

worker新線程：

1. 綁定 onmessage 方法來接收主線程發(fā)送過來的數(shù)據(jù)。
2. 通過 postMessage(data) 方法來向主線程發(fā)送數(shù)據(jù)。
3. 可以使用 self.close() 來終止一個(gè) worker 的執(zhí)行。

Worker 其他

關(guān)于 Web Worker，最重要的是要知道它所執(zhí)行的 Javascript 代碼完全在另一個(gè)作用域中，與當(dāng)前網(wǎng)頁中的代碼不共享作用域。在 Web Worker 中，同樣有一個(gè)全局對(duì)象（worker 對(duì)象本身，this 和 self 引用的都是 worker 對(duì)象本身）和其他對(duì)象以及方法。Web Worker 中的代碼不能訪問 DOM。那么 Worker 里的代碼能訪問哪些對(duì)象，擁有哪些方法？

1. 最小化 的navigator 對(duì)象，包括 onLine、appName、appVersion、userAgent 和 platform 屬性
2. 只讀的 location 對(duì)象
3. setTimeout()、setInterval()、clearTimeout()、clearInterval() 方法
4. XMLHttpRequest 構(gòu)造函數(shù)

任何時(shí)候都能中止 Worker。在 worker.js 中，我們可以用 self.close()方法，而在頁面中，我們可以用 worker.terminal()方法，這時(shí) error 和 message 事件也不會(huì)觸發(fā)了。