WebWorker是什么鬼？

作者：韓子遲 2015-11-12 10:03:34

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

前言

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

既然 Worker 是 H5 大家庭的，那么 ie6 之輩就可以一邊去了，詳細(xì)的瀏覽器兼容性可以參考 http://caniuse.com/#search=worker

如果沒(méi)有 Worker

我們來(lái)看這樣一段代碼：

<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>

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

祭出大殺器 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);

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

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

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

Worker 是通過(guò) message 和 error 事件與頁(yè)面通信的。來(lái)自 Worker 的數(shù)據(jù)保存在 event.data 中。Worker 不能完成給定的任務(wù)時(shí)會(huì)觸發(fā) error 事件。具體來(lái)說(shuō)，Worker 內(nèi)部的 Javascript 在執(zhí)行過(guò)程中只要遇到錯(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í)***寫(xiě)上 error 事件，就像使用 ajax 時(shí)總要寫(xiě)上獲取失敗時(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主線程:

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

worker新線程：

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

Worker 其他

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