以前我們總說，JS是單線程沒有多線程，當JS在頁面中運行長耗時同步任務的時候就會導致頁面假死影響用戶體驗，從而需要設置把任務放在任務隊列中；執行任務隊列中的任務也並非多線程進行的，然而現在HTML5提供了我們前端開發這樣的能力 - Web Workers API，我們一起來看一看 Web Worker 是什么，怎么去使用它，在實際生產中如何去用它來進行產出。
一、概述
JavaScript 語言采用的是單線程模型，也就是說，所有任務只能在一個線程上完成，一次只能做一件事。前面的任務沒做完，后面的任務只能等着。隨着電腦計算能力的增強，尤其是多核 CPU 的出現，單線程帶來很大的不便，無法充分發揮計算機的計算能力。
Web Workers 使得一個Web應用程序可以在與主執行線程分離的后台線程中運行一個腳本操作。這樣做的好處是可以在一個單獨的線程中執行費時的處理任務，從而允許主（通常是UI）線程運行而不被阻塞。
Web Worker 的作用，就是為 JavaScript 創造多線程環境，允許主線程創建 Worker 線程，將一些任務分配給后者運行。
在主線程運行的同時，worker線程也在運行，相互不干擾。等到 Worker 線程完成計算任務，再把結果返回給主線程。這樣做的好處是主線程可以把一些計算密集型或高延遲的任務交給worker線程執行，被 Worker 線程負擔了，這樣主線程（通常負責 UI 交互）就會很輕松流暢，不會被阻塞或拖慢。
但是注意這並不是意味着JS語言本身支持了多線程能力，而是瀏覽器作為宿主環境提供了JS一個多線程運行的環境。
而且Worker 線程一旦新建成功，就會始終運行，不會被主線程上的活動（比如用戶點擊按鈕、提交表單）打斷。這樣有利於隨時響應主線程的通信。但是，這也造成了 Worker 比較耗費資源，不應該過度使用，而且一旦使用完畢，就應該注意及時關閉。
或者說：如果worker無實例引用，該worker空閑后立即會被關閉；如果worker實列引用不為0，該worker空閑也不會被關閉。
二、使用
1、限制
worker線程的使用有一些注意點：
（1）同源限制：分配給 Worker 線程運行的腳本文件，必須與主線程的腳本文件同源。
（2）文件限制：為了安全，Worker 線程無法讀取本地文件，即不能打開本機的文件系統（file://），它所加載的腳本必須來自網絡，且需要與主線程的腳本同源。
（3）DOM操作限制：worker線程在與主線程的window不同的另一個全局上下文中運行，其中無法讀取主線程所在網頁的DOM對象，也不能獲取 document、window等對象，但是可以獲取navigator、location(只讀)、XMLHttpRequest、setTimeout等瀏覽器API。
（4）通信限制：worker線程與主線程不在同一個上下文，不能直接通信，需要通過postMessage方法傳遞消息來通信。
（5）腳本限制：worker線程不能執行alert、confirm，但可以使用 XMLHttpRequest 對象發出ajax請求。
2、基本用法
（1）Worker()構造函數
在主線程中生成 Worker 線程很容易：主線程采用new命令，調用Worker()構造函數，新建一個 Worker 線程。
var myWorker = new Worker(jsUrl, options)
第一個參數是腳本的網址（必須遵守同源政策），該參數是必需的，且只能加載 JS 腳本，否則報錯。該文件就是 Worker 線程所要執行的任務。由於 Worker 不能讀取本地文件，所以這個腳本必須來自網絡。如果下載沒有成功（比如404錯誤），Worker 就會默默地失敗。
第二個參數是配置對象，該對象可選。它的一個作用就是指定 Worker 的名稱，用來區分多個 Worker 線程。
// 主線程
var myWorker = new Worker('worker.js', { name : 'myWorker' }); // Worker 線程
self.name // myWorker
然后，主線程調用worker.postMessage()方法，向 Worker 發消息。
（2）消息傳遞
主線程：
然后，主線程調用worker.postMessage()方法，向 Worker 發消息。
worker.postMessage('Hello World'); worker.postMessage({method: 'echo', args: ['Work']});
worker.postMessage()方法的參數，就是主線程傳給 Worker 的數據。它可以是各種數據類型，包括二進制數據。
接着，主線程通過worker.onmessage指定監聽函數，接收子線程發回來的消息。
worker.onmessage = function (event) { console.log('Received message ' + event.data); doSomething(); } function doSomething() { // 執行任務
worker.postMessage('Work done!'); }
上面代碼中，事件對象的data屬性可以獲取 Worker 發來的數據。
Worker 完成任務以后，主線程就可以把它關掉。
worker.terminate();
Worker 線程
Worker 線程內部需要有一個監聽函數，監聽message事件。
self.addEventListener('message', function (e) { self.postMessage('You said: ' + e.data); }, false);
上面代碼中，self代表子線程自身，即子線程的全局對象。因此，等同於下面兩種寫法。
// 寫法一
this.addEventListener('message', function (e) { this.postMessage('You said: ' + e.data); }, false); // 寫法二
addEventListener('message', function (e) { postMessage('You said: ' + e.data); }, false);
除了使用self.addEventListener()指定監聽函數，也可以使用self.onmessage指定。監聽函數的參數是一個事件對象，它的data屬性包含主線程發來的數據。
self.postMessage()方法用來向主線程發送消息。
根據主線程發來的數據，Worker 線程可以調用不同的方法，下面是一個例子。
self.addEventListener('message', function (e) { var data = e.data; switch (data.cmd) { case 'start': self.postMessage('WORKER STARTED: ' + data.msg); break; case 'stop': self.postMessage('WORKER STOPPED: ' + data.msg); self.close(); // Terminates the worker.
break; default: self.postMessage('Unknown command: ' + data.msg); }; }, false);
上面代碼中，self.close()用於在 Worker 內部關閉自身。
（3）API實例
關於api什么的，直接上例子大概就能明白了，首先是worker線程的js文件：
// workerThread1.js
let i = 1 function simpleCount() { i++ self.postMessage(i) setTimeout(simpleCount, 1000) } simpleCount() self.onmessage = ev => { postMessage(ev.data + ' 呵呵~') }
在HTML文件中的body中：
// 主線程，HTML文件的body標簽中
<div> Worker 輸出內容：<span id='app'></span>
<input type='text' title='' id='msg'>
<button onclick='sendMessage()'>發送</button>
<button onclick='stopWorker()'>stop!</button>
</div>
<script type='text/javascript'>
if (typeof(Worker) === 'undefined') // 使用Worker前檢查一下瀏覽器是否支持
document.writeln(' Sorry! No Web Worker support.. ') else { window.w = new Worker('workerThread1.js') window.w.onmessage = ev => { document.getElementById('app').innerHTML = ev.data } window.w.onerror = err => { w.terminate() console.log(error.filename, error.lineno, error.message) // 發生錯誤的文件名、行號、錯誤內容
} function sendMessage() { const msg = document.getElementById('msg') window.w.postMessage(msg.value) } function stopWorker() { window.w.terminate() } } </script>
可以自己運行一下看看效果，上面用到了一些常用的api：
主線程中的api，worker表示是 Worker 的實例：
worker.postMessage: 主線程往worker線程發消息，消息可以是任意類型數據，包括二進制數據worker.terminate: 主線程關閉worker線程worker.onmessage: 指定worker線程發消息時的回調，也可以通過worker.addEventListener('message',cb)的方式worker.onerror: 指定worker線程發生錯誤時的回調，也可以worker.addEventListener('error',cb)
Worker線程中全局對象為 self，代表子線程自身，這時 this指向self，其上有一些api：
self.postMessage: worker線程往主線程發消息，消息可以是任意類型數據，包括二進制數據self.close: worker線程關閉自己self.onmessage: 指定主線程發worker線程消息時的回調，也可以self.addEventListener('message',cb)self.onerror: 指定worker線程發生錯誤時的回調，也可以self.addEventListener('error',cb)
注意，w.postMessage(aMessage, transferList) 方法接受兩個參數，aMessage 是可以傳遞任何類型數據的，包括對象，這種通信是拷貝關系，即是傳值而不是傳址，Worker 對通信內容的修改，不會影響到主線程。事實上，瀏覽器內部的運行機制是，先將通信內容串行化，然后把串行化后的字符串發給 Worker，后者再將它還原。一個可選的 Transferable 對象的數組，用於傳遞所有權。如果一個對象的所有權被轉移，在發送它的上下文中將變為不可用（中止），並且只有在它被發送到的worker中可用。可轉移對象是如ArrayBuffer，MessagePort或ImageBitmap的實例對象，transferList數組中不可傳入null。
Transferable接口代表一個能在不同可執行上下文之間，例如如主線程和Worker之間，相互傳遞的對象。這是一個抽象接口，沒有任何對象屬於此類型。它也沒有定義任何方法和屬性；它只是一個標簽，用來指示對象在特定場合下，比如如通過Worker.postMessage()方法傳遞到Worker，是可用的。備注：技術上，
Transferable接口已不復存在。但是，Transferable對象的效用依舊存在，只是其實現被移到了更加底層的位置。（轉而通過WebIDL 拓展屬性[Transferable]實現）。
ArrayBuffer、MessagePort和ImageBitmap實現了此接口。
更詳細的API參見 MDN - WorkerGlobalScope。
（4）Worker 加載腳本
Worker 內部如果要加載其他腳本，有一個專門的方法importScripts()。
worker線程中加載腳本的api：
importScripts('script1.js') // 加載單個腳本
importScripts('script1.js', 'script2.js') // 加載多個腳本
（5）錯誤處理
主線程可以監聽 Worker 是否發生錯誤。如果發生錯誤，Worker 會觸發主線程的error事件。
worker.onerror(function (event) { console.log([ 'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message ].join('')); }); // 或者
worker.addEventListener('error', function (event) { // ...
});
Worker 內部也可以監聽error事件。
（6）關閉 Worker
使用完畢，為了節省系統資源，必須關閉 Worker。
// 主線程
worker.terminate(); // Worker 線程
self.close();
三、數據通信
前面說過，主線程與 Worker 之間的通信內容，可以是文本，也可以是對象。需要注意的是，這種通信是拷貝關系，也就是傳值而不是傳址，Worker 對通信內容的修改，不會影響到主線程。事實上，瀏覽器內部的運行機制是，先將通信內容串行化，然后把串行化后的字符串發給 Worker，后者再將它還原。
主線程與 Worker 之間也可以交換二進制數據，比如 File、Blob、ArrayBuffer 等類型，也可以在線程之間發送。下面是一個例子：
// 主線程
var uInt8Array = new Uint8Array(new ArrayBuffer(10)); for (var i = 0; i < uInt8Array.length; ++i) { uInt8Array[i] = i * 2; // [0, 2, 4, 6, 8,...]
} worker.postMessage(uInt8Array); // Worker 線程
self.onmessage = function (e) { var uInt8Array = e.data; postMessage('Inside worker.js: uInt8Array.toString() = ' + uInt8Array.toString()); postMessage('Inside worker.js: uInt8Array.byteLength = ' + uInt8Array.byteLength); };
但是，拷貝方式發送二進制數據，會造成性能問題。比如，主線程向 Worker 發送一個 500MB 文件，默認情況下瀏覽器會生成一個原文件的拷貝。為了解決這個問題，JavaScript 允許主線程把二進制數據直接轉移給子線程，但是一旦轉移，主線程就無法再使用這些二進制數據了，這是為了防止出現多個線程同時修改數據的麻煩局面。這種轉移數據的方法，叫做Transferable Objects。這使得主線程可以快速把數據交給 Worker，對於影像處理、聲音處理、3D 運算等就非常方便了，不會產生性能負擔。
如果要直接轉移數據的控制權，就要使用下面的寫法。
// Transferable Objects 格式
worker.postMessage(arrayBuffer, [arrayBuffer]); // 例子
var ab = new ArrayBuffer(1); worker.postMessage(ab, [ab]);
四、同頁面的 Web Worker
通常情況下，Worker 載入的是一個單獨的 JavaScript 腳本文件，但是也可以載入與主線程在同一個網頁的代碼。
<!DOCTYPE html>
<body>
<script id="worker" type="app/worker"> addEventListener('message', function () { postMessage('some message'); }, false); </script>
</body>
</html>
上面是一段嵌入網頁的腳本，注意必須指定<script>標簽的type屬性是一個瀏覽器不認識的值，上例是app/worker。
然后，讀取這一段嵌入頁面的腳本，用 Worker 來處理。
var blob = new Blob([document.querySelector('#worker').textContent]); var url = window.URL.createObjectURL(blob); var worker = new Worker(url); worker.onmessage = function (e) { // e.data === 'some message'
};
上面代碼中，先將嵌入網頁的腳本代碼，轉成一個二進制對象，然后為這個二進制對象生成 URL，再讓 Worker 加載這個 URL。這樣就做到了，主線程和 Worker 的代碼都在同一個網頁上面。
五、實戰場景
個人覺得，Web Worker我們可以當做計算器來用，需要用的時候掏出來摁一摁，不用的時候一定要收起來。
1、加密數據：有些加解密的算法比較復雜，或者在加解密很多數據的時候，這會非常耗費計算資源，導致UI線程無響應，因此這是使用Web Worker的好時機，使用Worker線程可以讓用戶更加無縫的操作UI。
2、預取數據：有時候為了提升數據加載速度，可以提前使用Worker線程獲取數據，因為Worker線程是可以是用 XMLHttpRequest 的。
3、預渲染：在某些渲染場景下，比如渲染復雜的canvas的時候需要計算的效果比如反射、折射、光影、材料等，這些計算的邏輯可以使用Worker線程來執行，也可以使用多個Worker線程。
4、復雜數據處理場景：某些檢索、排序、過濾、分析會非常耗費時間，這時可以使用Web Worker來進行，不占用主線程。
5、預加載圖片：有時候一個頁面有很多圖片，或者有幾個很大的圖片的時候，如果業務限制不考慮懶加載，也可以使用Web Worker來加載圖片，可以參考一下這篇文章的探索，這里簡單提要一下。
// 主線程
let w = new Worker("js/workers.js"); w.onmessage = function (event) { var img = document.createElement("img"); img.src = window.URL.createObjectURL(event.data); document.querySelector('#result').appendChild(img) }
// worker線程
let arr = [...好多圖片路徑]; for (let i = 0, len = arr.length; i < len; i++) { let req = new XMLHttpRequest(); req.open('GET', arr[i], true); req.responseType = "blob"; req.setRequestHeader("client_type", "DESKTOP_WEB"); req.onreadystatechange = () => { if (req.readyState == 4) { postMessage(req.response); } } req.send(null); }
在實戰的時候注意
- 雖然使用worker線程不會占用主線程，但是啟動worker會比較耗費資源
- 主線程中使用XMLHttpRequest在請求過程中瀏覽器另開了一個異步http請求線程，但是交互過程中還是要消耗主線程資源
在 Webpack 項目里面使用 Web Worker 請參照：怎么在 ES6+Webpack 下使用 Web Worker
1、Worker 線程完成輪詢
有時，瀏覽器需要輪詢服務器狀態，以便第一時間得知狀態改變。這個工作可以放在 Worker 里面。
function createWorker(f) { var blob = new Blob(['(' + f.toString() +')()']); var url = window.URL.createObjectURL(blob); var worker = new Worker(url); return worker; } var pollingWorker = createWorker(function (e) { var cache; function compare(new, old) { ... }; setInterval(function () { fetch('/my-api-endpoint').then(function (res) { var data = res.json(); if (!compare(data, cache)) { cache = data; self.postMessage(data); } }) }, 1000) }); pollingWorker.onmessage = function () { // render data
} pollingWorker.postMessage('init');
上面代碼中，Worker 每秒鍾輪詢一次數據，然后跟緩存做比較。如果不一致，就說明服務端有了新的變化，因此就要通知主線程。
2、Worker 新建 Worker
Worker 線程內部還能再新建 Worker 線程（目前只有 Firefox 瀏覽器支持）。下面的例子是將一個計算密集的任務，分配到10個 Worker。
主線程代碼如下：
var worker = new Worker('worker.js'); worker.onmessage = function (event) { document.getElementById('result').textContent = event.data; };
// worker.js // settings
var num_workers = 10; var items_per_worker = 1000000; // start the workers
var result = 0; var pending_workers = num_workers; for (var i = 0; i < num_workers; i += 1) { var worker = new Worker('core.js'); worker.postMessage(i * items_per_worker); worker.postMessage((i + 1) * items_per_worker); worker.onmessage = storeResult; } // handle the results
function storeResult(event) { result += event.data; pending_workers -= 1; if (pending_workers <= 0) postMessage(result); // finished!
}
上面代碼中，Worker 線程內部新建了10個 Worker 線程，並且依次向這10個 Worker 發送消息，告知了計算的起點和終點。計算任務腳本的代碼如下。
// core.js
var start; onmessage = getStart; function getStart(event) { start = event.data; onmessage = getEnd; } var end; function getEnd(event) { end = event.data; onmessage = null; work(); } function work() { var result = 0; for (var i = start; i < end; i += 1) { // perform some complex calculation here
result += 1; } postMessage(result); close(); }