前端手中最重要的一把劍，就是JavaScript。

然而JavaScript是單線程運行的，在同一時間內只能執行一個任務。當JavaScript處理的程序越來越復雜的時候，需要處理的任務涉及大規模CPU運算，比如圖像、視頻的解析。單線程運行就會容易造成UI阻塞、頁面卡頓這些問題。

所以瀏覽器、Node都引入了多線程模式。瀏覽器的多線程模式是HTML5規范，Node多線程是Node官方模塊。

瀏覽器多線程——Web Worker

在瀏覽器中通過Web Worker使用多線程，在Web Worker線程中，直接運行JavaScript代碼，但是不能操作DOM節點，也不能使用window對象的默認方法和屬性、不能使用webSockets，IndexedDB這些數據存儲機制。

首先在腳本里面使用new Worker語句創建一個Worker線程。然后主線程或者Worker線程中，可以通過postMessage方法向另一個線程發送消息，使用onmessage事件函數來接受另一個線程發送的消息。比如：

Worker線程是分為專用Worker線程和共享Worker線程，專用線程是是有一個父線程，共享線程可以有多個父線程。

專用Worker線程

現在有這樣的一個代碼，需要計算1到300000000000的總和，打開瀏覽器，在代碼運行期間，瀏覽器會陷入卡頓，如下圖所示：

這樣時間久了，瀏覽器會崩潰的。

所以我們要把涉及到大量運算的任務放到Worker線程中執行，這樣就不阻塞UI的渲染了，現在在a.js中創建代碼，如下：

console.time("主線程占用時長");
let worker = new Worker("./b.js");
worker.onmessage = function (event) {
    console.log('計算結果: ' + event.data);
}
let runTimes = 300000000;
worker.postMessage(runTimes);
console.timeEnd("主線程占用時長");

b.js代碼為：

self.onmessage = function (event) {
    console.time("Worker線程占用時長");
    let result = 0;
    for (let i = 0; i < event.data; i++) {
        result += i;
    }
    self.postMessage(result);
    console.timeEnd("Worker線程占用時長");
}

執行效果如下：

等到Worker線程的任務執行完成，會打印結果，如下圖：

這樣大大降低主線程的負擔。

處理錯誤

在主線程里面監聽Worker線程是否出錯。相關的參數如下：

1. message：錯誤消息
2. filename：發生錯誤的腳本文件名
3. lineono：錯誤在腳本中的行號

對上面的代碼稍作調整：

let worker = new Worker("b.js");
worker.onmessage = function (event) {
    console.log(`Result is "${event.data}"`);
};
worker.onerror = function (event) {
    console.log("message: " + event.message);
    console.log("filename: " + event.filename);
    console.log("lineno: " + event.lineno);
}
worker.postMessage(null);

然后，b.js拋出一個錯誤：

self.onmessage = function (event) {
    throw new Error("Something wrong!");
};

效果如下：