作者：阮一峰
www.ruanyifeng.com/blog/2018/07/web-worker.html
概述
JavaScript 語言采用的是單線程模型匹层，也就是說锌蓄，所有任務只能在一個線程上完成瘸爽，一次只能做一件事。前面的任務沒做完洋只，后面的任務只能等著。隨著電腦計算能力的增強肢扯，尤其是多核 CPU 的出現(xiàn)担锤，單線程帶來很大的不便，無法充分發(fā)揮計算機的計算能力铭腕。
Web Worker 的作用累舷，就是為 JavaScript 創(chuàng)造多線程環(huán)境夹孔，允許主線程創(chuàng)建 Worker 線程，將一些任務分配給后者運行只怎。在主線程運行的同時怜俐，Worker 線程在后臺運行拍鲤，兩者互不干擾。等到 Worker 線程完成計算任務赴精，再把結果返回給主線程绞幌。這樣的好處是，一些計算密集型或高延遲的任務谭确，被 Worker 線程負擔了票渠，主線程（通常負責 UI 交互）就會很流暢问顷，不會被阻塞或拖慢禀梳。
Worker 線程一旦新建成功肠骆，就會始終運行蚀腿，不會被主線程上的活動（比如用戶點擊按鈕、提交表單）打斷廓脆。這樣有利于隨時響應主線程的通信磁玉。但是，這也造成了 Worker 比較耗費資源瞎嬉，不應該過度使用厚柳，而且一旦使用完畢别垮，就應該關閉扎谎。
Web Worker 有以下幾個使用注意點毁靶。
（1）同源限制
分配給 Worker 線程運行的腳本文件，必須與主線程的腳本文件同源龙填。
（2）DOM 限制
Worker 線程所在的全局對象拐叉，與主線程不一樣，無法讀取主線程所在網頁的 DOM 對象宿礁，也無法使用document梆靖、window、parent這些對象姑子。但是思喊，Worker 線程可以navigator對象和location對象。
（3）通信聯(lián)系
Worker 線程和主線程不在同一個上下文環(huán)境舆乔，它們不能直接通信剂公，必須通過消息完成纲辽。
（4）腳本限制
Worker 線程不能執(zhí)行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 對象發(fā)出 AJAX 請求鳞上。
（5）文件限制
Worker 線程無法讀取本地文件篙议，即不能打開本機的文件系統(tǒng)（file://）怠硼，它所加載的腳本，必須來自網絡这难。
基本用法
2.1 主線程
主線程采用new命令葡秒，調用Worker()構造函數(shù)同云，新建一個 Worker 線程测萎。
var?worker?=?new?Worker('work.js');
Worker()構造函數(shù)的參數(shù)是一個腳本文件，該文件就是 Worker 線程所要執(zhí)行的任務禁偎。由于 Worker 不能讀取本地文件，所以這個腳本必須來自網絡笆檀。如果下載沒有成功（比如404錯誤）盒至，Worker 就會默默地失敗枷遂。
然后，主線程調用worker.postMessage()方法矩桂，向 Worker 發(fā)消息痪伦。
worker.postMessage('Hello World');
worker.postMessage({method:?'echo',?args:?['Work']});
worker.postMessage()方法的參數(shù)网沾，就是主線程傳給 Worker 的數(shù)據(jù)。它可以是各種數(shù)據(jù)類型涣达，包括二進制數(shù)據(jù)证薇。
接著浑度，主線程通過worker.onmessage指定監(jiān)聽函數(shù)鸦概，接收子線程發(fā)回來的消息窗市。
worker.onmessage?=?function?(event)?{
??console.log('Received message '?+?event.data);
??doSomething();
}
function?doSomething()?{
??// 執(zhí)行任務
??worker.postMessage('Work done!');
}
上面代碼中，事件對象的data屬性可以獲取 Worker 發(fā)來的數(shù)據(jù)论熙。
Worker 完成任務以后摄狱，主線程就可以把它關掉。
worker.terminate();
2.2 Worker 線程
Worker 線程內部需要有一個監(jiān)聽函數(shù)宪迟，監(jiān)聽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()指定監(jiān)聽函數(shù)，也可以使用self.onmessage指定睡互。監(jiān)聽函數(shù)的參數(shù)是一個事件對象就珠，它的data屬性包含主線程發(fā)來的數(shù)據(jù)醒颖。self.postMessage()方法用來向主線程發(fā)送消息。
根據(jù)主線程發(fā)來的數(shù)據(jù)逼侦，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 內部關閉自身溯饵。
2.3 Worker 加載腳本
Worker 內部如果要加載其他腳本锨用，有一個專門的方法importScripts()增拥。
importScripts('script1.js');
該方法可以同時加載多個腳本。
importScripts('script1.js',?'script2.js');
2.4 錯誤處理
主線程可以監(jiān)聽 Worker 是否發(fā)生錯誤秩仆。如果發(fā)生錯誤澄耍，Worker 會觸發(fā)主線程的error事件晌缘。
worker.onerror(function?(event)?{
??console.log([
????'ERROR: Line ',?e.lineno,?' in ',?e.filename,?': ',?e.message
??].join(''));
});
// 或者
worker.addEventListener('error',?function?(event)?{
??// ...
});
2.5 關閉 Worker
使用完畢磷箕，為了節(jié)省系統(tǒng)資源，必須關閉 Worker芒填。
// 主線程
worker.terminate();
// Worker 線程
self.close();
數(shù)據(jù)通信
前面說過殿衰，主線程與 Worker 之間的通信內容盛泡，可以是文本，也可以是對象。需要注意的是掰吕，這種通信是拷貝關系颅痊，即是傳值而不是傳址斑响，Worker 對通信內容的修改钳榨，不會影響到主線程薛耻。事實上赏陵，瀏覽器內部的運行機制是蝙搔，先將通信內容串行化，然后把串行化后的字符串發(fā)給 Worker证鸥，后者再將它還原勤晚。
主線程與 Worker 之間也可以交換二進制數(shù)據(jù)运翼，比如 File血淌、Blob、ArrayBuffer 等類型癌淮，也可以在線程之間發(fā)送沦补。下面是一個例子夕膀。
// 主線程
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);
};
但是产舞，拷貝方式發(fā)送二進制數(shù)據(jù)，會造成性能問題耻煤。比如，主線程向 Worker 發(fā)送一個 500MB 文件棺妓，默認情況下瀏覽器會生成一個原文件的拷貝怜跑。為了解決這個問題眼五，JavaScript 允許主線程把二進制數(shù)據(jù)直接轉移給子線程看幼，但是一旦轉移，主線程就無法再使用這些二進制數(shù)據(jù)了汽煮，這是為了防止出現(xiàn)多個線程同時修改數(shù)據(jù)的麻煩局面暇赤。這種轉移數(shù)據(jù)的方法宵凌，叫做Transferable Objects瞎惫。這使得主線程可以快速把數(shù)據(jù)交給 Worker，對于影像處理挺益、聲音處理乘寒、3D 運算等就非常方便了伞辛，不會產生性能負擔蚤氏。
如果要直接轉移數(shù)據(jù)的控制權，就要使用下面的寫法。
// 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輪詢
有時，瀏覽器需要輪詢服務器狀態(tài)社证，以便第一時間得知狀態(tài)改變追葡。這個工作可以放在 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 每秒鐘輪詢一次數(shù)據(jù)杈女，然后跟緩存做比較达椰。如果不一致，就說明服務端有了新的變化梁沧，因此就要通知主線程廷支。
Worker 新建 Worker
Worker 線程內部還能再新建 Worker 線程恋拍。下面的例子是將一個計算密集的任務藕甩，分配到10個 Worker狭莱。
主線程代碼如下僵娃。
var?worker?=?new?Worker('worker.js');
worker.onmessage?=?function?(event)?{
??document.getElementById('result').textContent?=?event.data;
};
Worker 線程代碼如下。
// 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 發(fā)送消息，告知了計算的起點和終點骤素。計算任務腳本的代碼如下匙睹。
// 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();
}
API
7.1 主線程
瀏覽器原生提供Worker()構造函數(shù)愚屁，用來供主線程生成 Worker 線程。
var?myWorker?=?new?Worker(jsUrl,?options);
Worker()構造函數(shù)痕檬，可以接受兩個參數(shù)。第一個參數(shù)是腳本的網址（必須遵守同源政策）谆棺，該參數(shù)是必需的，且只能加載 JS 腳本罕袋，否則會報錯改淑。第二個參數(shù)是配置對象，該對象可選浴讯。它的一個作用就是指定 Worker 的名稱朵夏，用來區(qū)分多個 Worker 線程。
// 主線程
var?myWorker?=?new?Worker('worker.js',?{?name?:?'myWorker'?});
// Worker 線程
self.name?// myWorker
Worker()構造函數(shù)返回一個 Worker 線程對象榆纽，用來供主線程操作 Worker仰猖。Worker 線程對象的屬性和方法如下。
1奈籽、Worker.onerror：指定 error 事件的監(jiān)聽函數(shù)饥侵。
2、Worker.onmessage：指定 message 事件的監(jiān)聽函數(shù)衣屏，發(fā)送過來的數(shù)據(jù)在Event.data屬性中躏升。
3、Worker.onmessageerror：指定 messageerror 事件的監(jiān)聽函數(shù)狼忱。發(fā)送的數(shù)據(jù)無法序列化成字符串時膨疏，會觸發(fā)這個事件。
4钻弄、Worker.postMessage()：向 Worker 線程發(fā)送消息佃却。
5、Worker.terminate()：立即終止 Worker 線程窘俺。
7.2 Worker 線程
Web Worker 有自己的全局對象饲帅，不是主線程的window，而是一個專門為 Worker 定制的全局對象批销。因此定義在window上面的對象和方法不是全部都可以使用洒闸。
Worker 線程有一些自己的全局屬性和方法。
1均芽、self.name： Worker 的名字丘逸。該屬性只讀，由構造函數(shù)指定掀宋。
2深纲、self.onmessage：指定message事件的監(jiān)聽函數(shù)仲锄。
3、self.onmessageerror：指定 messageerror 事件的監(jiān)聽函數(shù)湃鹊。發(fā)送的數(shù)據(jù)無法序列化成字符串時儒喊，會觸發(fā)這個事件。
4币呵、self.close()：關閉 Worker 線程怀愧。
5、self.postMessage()：向產生這個 Worker 線程發(fā)送消息余赢。
5芯义、self.importScripts()：加載 JS 腳本。
