JS多線程WebWorker

時間 2019-11-08

原文原文鏈接

JS多線程WebWorker

一,介紹與需求

1.1,介紹

Web Worker能夠爲JavaScript建立多線程，且Web Worker 是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能。主線程在運行的時候，worker也在後臺運行，二者互不干擾，當worker線程完成任務後就能夠將結果返回給主線。javascript

當咱們建立一個新的worker時，該代碼會運行在一個全新的javascript的環境中（WorkerGlobalScope）運行,是徹底和建立worker的腳本隔離，這時咱們能夠吧建立新worker的腳本叫作主線程，而被建立的新的worker叫作子線程。
WorkerGlobalScope是worker的全局對象，因此它包含全部核心javascript全局對象擁有的屬性如JSON等，window的一些屬性，也擁有相似於XMLHttpRequest()等。java

目前基本全部主流瀏覽器均支持 Web Worker，除了 Internet Explorer。web

1.2,需求

JavaScript是單線程模型，即全部任務都在一個線程上完成，前面一個任務若是沒有執行完成，後面的任務就只能等待。若是在遇到耗時的計算時，程序就會阻塞在這裏，這對用戶來講時不可接受的。所以咱們若是在遇到耗時或者大量計算的時候就可使用Web Worker,以避免影響用戶的使用體驗。ajax

二,WebWorker的使用

2.1,WebWorker的限制

WebWorker是瀏覽器爲咱們提供的一個能夠在瀏覽器後臺開啓一個新的線程的API，使得運行在瀏覽器中的 js 有了多線程的能力。可是這並不意味這js自己就支持多線程，由於這種新線程有不少限制：算法

同源限制
worker線程執行的腳本文件必須和主線程的腳本文件同源的。canvas
文件限制
爲了安全，worker線程沒法讀取本地文件即不能打開本機的文件系統（file://），它所加載的腳本必須來自網絡，且須要與主線程的腳本同源瀏覽器
DOM操做限制
worker線程在與主線程的window不一樣的另外一個全局上下文中運行，其中沒法讀取主線程所在網頁的DOM對象，也不能獲取 document、window、parent等對象，可是能夠獲取navigator、location(只讀)、XMLHttpRequest、setTimeout等瀏覽器API。安全
通訊限制
Worker 線程和主線程不在同一個上下文環境，它們不能直接通訊，必須經過postMessage消息完成。websocket
腳本限制
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配合使用：
使用情景：

一、當項目中有多個後臺接口數據較大時，能夠開啓一個線程。

二、當須要點擊某按鈕後鏈接後臺獲取大量數據或開啓websocket時，能夠開啓一個線程。

三、加密數據
有些加解密的算法比較複雜，或者在加解密不少數據的時候，這會很是耗費計算資源，致使UI線程無響應，所以這是使用Web Worker的好時機，使用Worker線程可讓用戶更加無縫的操做UI。

四、預取數據
有時候爲了提高數據加載速度，能夠提早使用Worker線程獲取數據，由於Worker線程是能夠是用 XMLHttpRequest 的。

五、預渲染
在某些渲染場景下，好比渲染複雜的canvas的時候須要計算的效果好比反射、折射、光影、材料等，這些計算的邏輯可使用Worker線程來執行，也可使用多個Worker線程，這裏有個射線追蹤的示例。

六、複雜數據處理場景
某些檢索、排序、過濾、分析會很是耗費時間，這時可使用Web Worker來進行，不佔用主線程。

七、預加載圖片
有時候一個頁面有不少圖片，或者有幾個很大的圖片的時候，若是業務限制不考慮懶加載，也可使用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 }