JS多線程WebWorker

一,介紹與需求

1.1,介紹

 Web Worker可以為JavaScript創建多線程，且Web Worker 是運行在后台的 JavaScript，獨立於其他腳本，不會影響頁面的性能。主線程在運行的時候，worker也在后台運行，兩者互不干擾，當worker線程完成任務后就可以將結果返回給主線。

當我們創建一個新的worker時，該代碼會運行在一個全新的javascript的環境中（WorkerGlobalScope）運行,是完全和創建worker的腳本隔離，這時我們可以吧創建新worker的腳本叫做主線程，而被創建的新的worker叫做子線程。
WorkerGlobalScope是worker的全局對象，所以它包含所有核心javascript全局對象擁有的屬性如JSON等，window的一些屬性，也擁有類似於XMLHttpRequest()等。

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

1.2,需求

JavaScript是單線程模型，即所有任務都在一個線程上完成，前面一個任務如果沒有執行完成，后面的任務就只能等待。如果在遇到耗時的計算時，程序就會阻塞在這里，這對用戶來說時不可接受的。因此我們如果在遇到耗時或者大量計算的時候就可以使用Web Worker,以免影響用戶的使用體驗。

二,WebWorker的使用

2.1,WebWorker的限制

WebWorker是瀏覽器為我們提供的一個可以在瀏覽器后台開啟一個新的線程的API，使得運行在瀏覽器中的 js 有了多線程的能力。但是這並不意味這js本身就支持多線程，因為這種新線程有很多限制：

1. 同源限制
   worker線程執行的腳本文件必須和主線程的腳本文件同源的。

2. 文件限制
   為了安全，worker線程無法讀取本地文件即不能打開本機的文件系統（file://），它所加載的腳本必須來自網絡，且需要與主線程的腳本同源

3. DOM操作限制
   worker線程在與主線程的window不同的另一個全局上下文中運行，其中無法讀取主線程所在網頁的DOM對象，也不能獲取 document、window、parent等對象，但是可以獲取navigator、location(只讀)、XMLHttpRequest、setTimeout等瀏覽器API。

4. 通信限制
   Worker 線程和主線程不在同一個上下文環境，它們不能直接通信，必須通過postMessage消息完成。

5. 腳本限制
   Worker 線程不能執行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 對象發出 AJAX 請求。

2.2,例子

有一種連續轉換的方式可以直接將一個普通函數變成WebWorker對象,如下圖所示：

不用加載JS文件,直接使用方法,如下：

 // 子進程方法
        function runWork() {
            onmessage = ({ data: { processId, message } }) => {
                console.log('收到主線程消息：' + message);
                postMessage({ processId, result: message * 2 });
            };
        }
        const makeWorker = (func) => {
            let pendingProcesss = {};
            if (!window.Worker) {//瀏覽器不支持worker子線程的情況
                alert('瀏覽器不支持worker子線程');
                return;
            }
            //創建新的Worker
            const worker = new Worker(
                URL.createObjectURL(new Blob([`(${func.toString()})()`]))
            );
            //接收消息
            worker.onmessage = ({ data: { result, processId } }) => {
                // 調用resolve，改變Promise狀態
                pendingProcesss[processId](result);
                // 刪掉，防止進程id沖突
                delete pendingProcesss[processId];
                // 關閉worker線程
                worker.terminate();
            }

            //異常處理
            worker.onerror = function (err) { }

            return (...message) => new Promise(resolve => {
                const processId = String(Math.random())//new Date().getTime()

                pendingProcesss[processId] = resolve;
                //傳遞參數
                worker.postMessage({ processId, message });
            })
        }
        const testWorker = makeWorker(runWork);
        console.log('主線程正常運行：1')
        testWorker(260).then((num) => {
            console.log(`收到子線程的消息：${num}`)
        })
        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,該腳本文件中包含了我們在線程中需要執行的代碼

    const makeWorker = () => {
            var sharedWorker = new SharedWorker('./sharedworker.js')
            sharedWorker.port.start()
            sharedWorker.port.postMessage('你好，我是主線程！');
            sharedWorker.port.onmessage = (e) => {
                console.log('子線程發回的參數：' + e.data);
            };
        }
        makeWorker();

子線程 sharedworker.js：

onconnect = (e) => {
    let port = e.ports[0];
    port.onmessage=(e) => {
        console.log(e.data); // 特別注意，共享線程的console.log是看不到的
        port.postMessage('你好，我是SharedWorker！');
    };
    port.start();
}

效果如下:

使用場景:SharedWorker可實現多個標簽頁之間通信

let data = ''
onconnect = (e) => {
    let port = e.ports[0];
    port.onmessage=(e) => {
        // console.log(e.data); // 特別注意，共享線程的console.log是看不到的
        // port.postMessage('你好，我是SharedWorker11！' + e.data);
        if (e.data === 'get') {
            port.postMessage('你好，我是SharedWorker11！' + data)
        } else {
            data = e.data
        }
    };
    port.start();
}

使用sharedWorker.port.postMessage('get');可以獲取前一個方法設置的數據,實現多標簽頁之間的通信

實現瀏覽器中多個標簽頁之間的通信的方法有三種：使用websocket協議、通過localstorage、以及SharedWorker等等。

 注意:雖然此文章里面把它叫WebWorker，但是它的真正名字就叫Worker