Web Worker是HTML5提出的新標准，為 JavaScript 創造多線程環境，允許主線程創建 Worker 線程，將一些任務分配給后者運行。在主線程運行的同時，Worker 線程在后台運行，兩者互不干擾。等到 Worker 線程完成計算任務，再把結果返回給主線程。這樣的好處是，一些計算密集型或高延遲的任務，被 Worker 線程負擔了，主線程（通常負責 UI 交互）就會很流暢，不會被阻塞或拖慢。
注意
1.性能上要注意
Worker 線程一旦新建成功，就會始終運行，不會被主線程上的活動（比如用戶點擊按鈕、提交表單）打斷。這樣有利於隨時響應主線程的通信。但是，這也造成了 Worker 比較耗費資源，不應該過度使用，而且一旦使用完畢，就應該關閉。
2.同源限制
分配給 Worker 線程運行的腳本文件，必須與主線程的腳本文件同源。
3.DOM限制
Worker 線程所在的全局對象，與主線程不一樣，無法讀取主線程所在網頁的 DOM 對象，也無法使用document、window、parent這些對象。但是，Worker 線程可以navigator對象和location對象。
4.通信聯系
Worker 線程和主線程不在同一個上下文環境，它們不能直接通信，必須通過消息完成。
5.腳本限制
Worker 線程不能執行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 對象發出 AJAX 請求。
6.文件限制
Worker 線程無法讀取本地文件，即不能打開本機的文件系統（file://），它所加載的腳本，必須來自網絡。
Demo
關於這個demo又幾點需要注意的地方。
-
因
Web Worker是HTML5的新標准所以ECMAScript的標准語法中並不支持，這個demo實在瀏覽器上進行測試，支持HTML的瀏覽器除IE外都能很好的兼容Web Worker，IE10部分兼容。我這里選擇的chrome進行測試。 -
由於Worker構造函數 不能讀取本地文件，關於worker線程的腳本文件需要通過網絡下載，否則會報404（這點需要特別注意下）
為了順利測試解決worker線程的腳本需要通過網絡下載的問題這里我將WebWorkerDemo部署到本機的nginx上面使用chrom進行訪問
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn1">start worker!</button> <button id="btn2">postMessage Main====>worker</button> <button id="btn3">stop worker!</button> <script src="main.js"></script> </body> </html>
main.js
(function() { let startWorker = document.querySelector('#btn1'); let postMessage = document.querySelector('#btn2'); let stopWorker = document.querySelector('#btn3'); let worker; let data = 10; startWorker.addEventListener('click', () => { worker = new Worker('worker1.js'); worker.addEventListener('message', (event) => { console.log(event.data); if (!event.data) { console.log('closes worker thread'); worker.terminate(); } }, false); }); postMessage.addEventListener('click', () => { worker.postMessage(data); }); stopWorker.addEventListener('click', () => { worker.terminate(); }); }());
worker1.js
(function () { console.log('start worker'); this.addEventListener('message', (event) => { let count = event.data; setInterval(() => { postMessage(count--); }, 1000); }, false); }());
運行結果
Node.js的線程和進程
了解一下
參考