Web Worker是HTML5引入的一項技術(shù)，它允許在瀏覽器中創(chuàng)建多線程環(huán)境，將一些耗時的計算任務(wù)放在后臺線程中執(zhí)行，以避免阻塞主線程，提高頁面的響應(yīng)性和性能。

Web Worker具有以下特點和用途：

• 多線程環(huán)境：Web Worker在瀏覽器中創(chuàng)建了一個獨立的線程環(huán)境，與主線程（通常是UI線程）相互獨立運行。這樣可以使得主線程不受耗時任務(wù)的影響，保持頁面的流暢性和響應(yīng)性。
• 后臺執(zhí)行：Web Worker用于執(zhí)行一些耗時的計算、數(shù)據(jù)處理或其他需要大量CPU資源的任務(wù)。這些任務(wù)通常在后臺線程中執(zhí)行，不會阻塞用戶界面的更新和交互。
• 無法直接訪問DOM：Web Worker在獨立的線程中運行，因此無法直接訪問頁面的DOM結(jié)構(gòu)，也不能更新UI。這是為了保證線程安全和避免競爭條件。
• 事件通信機制：Web Worker通過事件機制與主線程通信。主線程可以向Web Worker發(fā)送消息，Web Worker通過監(jiān)聽message事件來接收消息并進行相應(yīng)的處理。同樣，Web Worker也可以向主線程發(fā)送消息。

使用

• 主線程

// 創(chuàng)建Worker對象實例
var worker = new Worker('http://localhost:3000/worker.js'); // 只會執(zhí)行url指定的腳本，必須同源

// 監(jiān)聽并接收worker線程消息
worker.onmessage = (e) => {
    console.log(`收到worker線程消息：${e.data}`);
    work.terminate(); // 銷毀worker線程
};

// 向worker線程發(fā)送消息
worker.postMessage('hello worker')

• worker線程（worker.js）

// 監(jiān)聽并接收主線程發(fā)送的消息
self.onmessage = (e) => { // 在子線程中，self代表worker子線程的全局對象，也可以用this代替self，或者省略也行。
    console.log(`收到主線程消息：${e.data}`); 
    //向主線程發(fā)送消息
    postMessage('你好，我是worker！');

    // 子線程自己關(guān)閉
    // self.close()
}