JS多執行緒WebWorker
JS多執行緒WebWorker
一,介紹與需求
1.1,介紹
Web Worker可以為JavaScript建立多執行緒，且Web Worker 是執行在後臺的 JavaScript，獨立於其他指令碼，不會影響頁面的效能。主執行緒在執行的時候，worker也在後臺執行，兩者互不干擾，當worker執行緒完成任務後就可以將結果返回給主線。
當我們建立一個新的worker時，該程式碼會執行在一個全新的javascript的環境中（WorkerGlobalScope）執行,是完全和建立worker的指令碼隔離，這時我們可以吧建立新worker的指令碼叫做主執行緒，而被建立的新的worker叫做子執行緒。
目前基本所有主流瀏覽器均支援 Web Worker，除了 Internet Explorer。
1.2,需求
JavaScript是單執行緒模型，即所有任務都在一個執行緒上完成，前面一個任務如果沒有執行完成，後面的任務就只能等待。如果在遇到耗時的計算時，程式就會阻塞在這裡，這對使用者來說時不可接受的。因此我們如果在遇到耗時或者大量計算的時候就可以使用Web Worker,以免影響使用者的使用體驗。
二,WebWorker的使用
2.1,WebWorker的限制
WebWorker是瀏覽器為我們提供的一個可以在瀏覽器後臺開啟一個新的執行緒的API，使得執行在瀏覽器中的 js 有了多執行緒的能力。但是這並不意味這js本身就支援多執行緒，因為這種新執行緒有很多限制：
-
同源限制
worker執行緒執行的指令碼檔案必須和主執行緒的指令碼檔案同源的。 -
檔案限制
為了安全，worker執行緒無法讀取本地檔案即不能開啟本機的檔案系統（file://），它所載入的指令碼必須來自網路，且需要與主執行緒的指令碼同源 -
DOM操作限制
worker執行緒在與主執行緒的window不同的另一個全域性上下文中執行，其中無法讀取主執行緒所在網頁的DOM物件，也不能獲取document、window、parent等物件，但是可以獲取navigator、location(只讀)、XMLHttpRequest、setTimeout等瀏覽器API。 -
通訊限制
Worker 執行緒和主執行緒不在同一個上下文環境，它們不能直接通訊，必須通過postMessage訊息完成。 -
指令碼限制
Worker 執行緒不能執行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 物件發出 AJAX 請求。
2.2,例子
有一種連續轉換的方式可以直接將一個普通函式變成WebWorker物件,如下圖所示：
不用載入JS檔案,直接使用方法,如下：
1 // 子程序方法
2 function runWork() {
3 onmessage = ({ data: { processId, message } }) => {
4 console.log('收到主執行緒訊息：' + message);
5 postMessage({ processId, result: message * 2 });
6 };
7 }
8 const makeWorker = (func) => {
9 let pendingProcesss = {};
10 if (!window.Worker) {//瀏覽器不支援worker子執行緒的情況
11 alert('瀏覽器不支援worker子執行緒');
12 return;
13 }
14 //建立新的Worker
15 const worker = new Worker(
16 URL.createObjectURL(new Blob([`(${func.toString()})()`]))
17 );
18 //接收訊息
19 worker.onmessage = ({ data: { result, processId } }) => {
20 // 呼叫resolve，改變Promise狀態
21 pendingProcesss[processId](result);
22 // 刪掉，防止程序id衝突
23 delete pendingProcesss[processId];
24 // 關閉worker執行緒
25 worker.terminate();
26 }
27
28 //異常處理
29 worker.onerror = function (err) { }
30
31 return (...message) => new Promise(resolve => {
32 const processId = String(Math.random())//new Date().getTime()
33 pendingProcesss[processId] = resolve;
34 //傳遞引數
35 worker.postMessage({ processId, message });
36 })
37 }
38 const testWorker = makeWorker(runWork);
39 console.log('主執行緒正常執行：1')
40 testWorker(260).then((num) => {
41 console.log(`收到子執行緒的訊息：${num}`)
42 })
43 console.log('主執行緒正常執行：2')
執行效果如下圖所示:
2.3,使用場景
worker+ajax配合使用：
使用情景：
1、當專案中有多個後臺介面資料較大時，可以開啟一個執行緒。
2、當需要點選某按鈕後連線後臺獲取大量資料或開啟websocket時，可以開啟一個執行緒。
3、加密資料
有些加解密的演算法比較複雜，或者在加解密很多資料的時候，這會非常耗費計算資源，導致UI執行緒無響應，因此這是使用Web Worker的好時機，使用Worker執行緒可以讓使用者更加無縫的操作UI。
4、預取資料
有時候為了提升資料載入速度，可以提前使用Worker執行緒獲取資料，因為Worker執行緒是可以是用 XMLHttpRequest 的。
5、預渲染
在某些渲染場景下，比如渲染複雜的canvas的時候需要計算的效果比如反射、折射、光影、材料等，這些計算的邏輯可以使用Worker執行緒來執行，也可以使用多個Worker執行緒，這裡有個射線追蹤的示例。
6、複雜資料處理場景
某些檢索、排序、過濾、分析會非常耗費時間，這時可以使用Web Worker來進行，不佔用主執行緒。
7、預載入圖片
有時候一個頁面有很多圖片，或者有幾個很大的圖片的時候，如果業務限制不考慮懶載入，也可以使用Web Worker來載入圖片，可以參考一下這篇文章的探索，這裡簡單提要一下。
注意事項:
-
雖然使用worker執行緒不會佔用主執行緒，但是啟動worker會比較耗費資源
-
主執行緒中使用XMLHttpRequest在請求過程中瀏覽器另開了一個非同步http請求執行緒，但是互動過程中還是要消耗主執行緒資源
2.4,共享執行緒（SharedWorker）
共享執行緒是為了避免執行緒的重複建立和銷燬過程，降低了系統性能的消耗，共享執行緒SharedWorker可以同時有多個頁面的執行緒連結。
使用SharedWorker建立共享執行緒，也需要提供一個javascript指令碼檔案的URL地址或Blob,該指令碼檔案中包含了我們線上程中需要執行的程式碼
1 const makeWorker = () => {
2 var sharedWorker = new SharedWorker('./sharedworker.js')
3 sharedWorker.port.start()
4 sharedWorker.port.postMessage('你好，我是主執行緒！');
5 sharedWorker.port.onmessage = (e) => {
6 console.log('子執行緒發回的引數：' + e.data);
7 };
8 }
9 makeWorker();
子執行緒 sharedworker.js：
1 onconnect = (e) => {
2 let port = e.ports[0];
3 port.onmessage=(e) => {
4 console.log(e.data); // 特別注意，共享執行緒的console.log是看不到的
5 port.postMessage('你好，我是SharedWorker！');
6 };
7 port.start();
8 }
效果如下:
使用場景:SharedWorker可實現多個標籤頁之間通訊
1 let data = ''
2 onconnect = (e) => {
3 let port = e.ports[0];
4 port.onmessage=(e) => {
5 // console.log(e.data); // 特別注意，共享執行緒的console.log是看不到的
6 // port.postMessage('你好，我是SharedWorker11！' + e.data);
7 if (e.data === 'get') {
8 port.postMessage('你好，我是SharedWorker11！' + data)
9 } else {
10 data = e.data
11 }
12 };
13 port.start();
14 }
使用sharedWorker.port.postMessage('get');可以獲取前一個方法設定的資料,實現多標籤頁之間的通訊
實現瀏覽器中多個標籤頁之間的通訊的方法有三種：使用websocket協議、通過localstorage、以及SharedWorker等等。
注意:雖然此文章裡面把它叫WebWorker，但是它的真正名字就叫Worker
&n