在博主的前些文章Promise的前世今生和妙用技巧和JavaScript單線程和瀏覽器事件循環簡述中都曾提到了HTML5 Web Worker這一個概念。在JavaScript單線程和瀏覽器事件循環簡述中講述了JavaScript出于界面元素訪問安全的考慮，所以JavaScript運行時一直是被實現為單線程執行的；這也意味著我們應該盡量的避免在JavaScript中執行較長耗時的操作（如大量for循環的對象diff等）或者是長時間I/O阻塞的任務，特別是對于CPU計算密集型的操作。

例如在JavaScript中嘗試計算像fibonacci這類計算密集型的操作，就會導致整個頁面體驗被blocked。HTML5 Web Worker的出現讓我們在不阻塞當前JavaScript線程的情況下，在當前的JavaScript執行線程中可利用Worker這個類新開辟一個額外的線程來加載和運行特定的JavaScript文件，這個新的線程和JavaScript的主線程之間并不會互相影響和阻塞執行的；并且在Web Worker中提供這個新線程和JavaScript主線程之間數據交換的接口：postMessage和onmessage事件。它和C# WinForm中的BackgroundWorker很類似。

Web Worker實現fibonacci計算

利用HTML5 Web Worker實現fibonacci可像如下所示（plnkr在線demo）：

fibonacci.js Worker JavaScript文件：

(function() {var fibonacci = function(n) {return n < 2 ? 1 : (fibonacci(n - 1) + fibonacci(n - 2));};onmessage = function(event) {postMessage({input: event.data,result: fibonacci(event.data)});};})();

在fibonacci.js中利用onmessage方法來監聽主線程發送的fibonacci計算請求，和利用postMessage返回計算的結果到請求線程。

script.js 主線程JavaScript文件：

$(function() {var $input = $('#input'),$btn = $('#btn'),$result = $('#result'),worker = new Worker('fibonacci.js'),timeKey = function(val) {return 'fibonacci(' + val + ')';};worker.onmessage = function(event) {console.timeEnd(timeKey(event.data.input));$result.text(event.data.result);};$btn.on('click', function() {var val = parseInt($input.val(), 10);if (val) {console.time(timeKey(val));$result.text('?')worker.postMessage(val);}}); });

在這個JavaScript文件中，利用new Worker('fibonacci.js')方式來創建Web Worker對象，并利用Worker對象上的postMessage方法發送請求計算請求，以及利用Worker對象的onmessage的方法接受Worker線程的返回結果，并顯示在UI界面上。同時我們也利用了console最新的time API來統計計算所花費的時間。

其顯示效果如下：

在console中打印的時間信息為：

fibonacci(10): 1.022ms fibonacci(20): 1.384ms fibonacci(30): 22.065ms fibonacci(40): 1744.352ms fibonacci(50): 202140.027ms

從這里時間輸出可以看出，在計算n為40的fibonacci 開始時間開始急速的加長，在UI中返回結果的時間也逐漸變長；但是在Web Worker后臺計算的時候，它并不會阻塞我們的UI界面的其他交互。

Web Worker總結

Web Worker在這類耗時計算密集型操作中，顯得特別實用。在Web Worker中我們可以實現：

可以加載一個JS進行大量的復雜計算而不掛起主進程，并通過postMessage，onmessage進行通信；

可以在worker中通過importScripts(url)加載另外的腳本文件；

可以使用 setTimeout()，clearTimeout()，setInterval()，clearInterval()；

可以使用XMLHttpRequest來發送請求，以及訪問navigator的部分屬性。

但是它也存在一些來自瀏覽器安全沙盒的限制：

不能加載跨域的JavaScript文件；

如文件開始所說，考慮到JavaScript操作DOM的安全性問題，在Web Worker中不能訪問界面中的DOM信息，對于DOM的訪問操作都必須委托給JavaScript主線程來操作；因此HTML5 Web Worker的出現的出現，并沒有改變JavaScript單線程執行的這個事實；

還有就是Web Worker的瀏覽器兼容性問題。它的瀏覽器兼容性圖如下：

更多關于Web Worker的資料，請參考https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers。

總結

以上是生活随笔為你收集整理的JavaScript多线程之HTML5 Web Worker的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。