Worker | 文檔

worker 線程的關閉在主線程和 worker 線程都能進行操作，但對 worker 線程的影響略有不同。

// main.js（主線程）
const myWorker = new Worker('/worker.js'); // 創建worker
myWorker.terminate(); // 關閉worker
復制代碼

// worker.js（worker線程）
self.close(); // 直接執行close方法就ok了
復制代碼

無論是在主線程關閉 worker，還是在 worker 線程內部關閉 worker，worker 線程當前的 Event Loop 中的任務會繼續執行。至于 worker 線程下一個 Event Loop 中的任務，則會被直接忽略，不會繼續執行。

區別是，在主線程手動關閉 worker，主線程與 worker 線程之間的連接都會被立刻停止，即使 worker 線程當前的 Event Loop 中仍有待執行的任務繼續調用?postMessage()?方法，但主線程不會再接收到消息。

在 worker 線程內部關閉 worker，不會直接斷開與主線程的連接，而是等 worker 線程當前的 Event Loop 所有任務執行完，再關閉。也就是說，在當前 Event Loop 中繼續調用?postMessage()?方法，主線程還是能通過監聽message事件收到消息的

new Worker() 用于創建一個新的 Web Worker 線程。Web Worker 是瀏覽器提供的一種多線程機制，它可以在后臺執行 JavaScript 代碼，不會阻塞主線程，從而提高了 Web 應用程序的性能和響應能力。
?
以下是一個示例代碼，演示了如何使用 new Worker() 創建一個新的 Web Worker 線程：
?
// 創建一個 Web Worker 線程
const worker = new Worker('worker.js');
在上述示例中，我們創建了一個名為 worker 的 Web Worker 線程，并指定了要執行的 JavaScript 文件為 worker.js。
?
需要注意的是，Web Worker 線程中不能直接訪問 DOM，也不能使用一些瀏覽器環境中的 API（如 alert()、confirm()、prompt()、localStorage 等）。同時，Web Worker 線程和主線程之間是通過消息通信來進行交互的，要向 Web Worker 線程發送消息，可以使用 worker.postMessage() 方法；要監聽 Web Worker 線程的消息，可以使用 worker.onmessage 事件。

?一、直接引用絕對路徑文件?
若Worker腳本文件以?靜態資源形式存放?（如public/worker.js），可直接通過路徑引用：

vue2// 主線程代碼

// worker.js 代碼

vue3+vite+ts??//主線程代碼

?// worker.js 代碼

二、需要配置的情形

使用動態模塊路徑或需要引入第三方庫時，必須通過worker-loader處理：?

1.安裝依賴? npm install worker-loader -D

2.配置vue.config.js?? ? 添加Webpack規則處理.worker.js后綴文件:

chainWebpack: config => {config.module .rule('worker') .test(/\.worker\.js$/) .use('worker-loader') .loader('worker-loader') .end(); 
config.module.rule('js').exclude.add(/\.worker\.js$/) 
}

?//TypeScript項目?
//需聲明Worker模塊類型（創建worker.d.ts文件）：

declare module '*.worker.js' { class WebWorker extends Worker { constructor(); } export default WebWorker; } }

3.案例：

主線程代碼

work.js

self.onmessage=(event)=>{const result = event.data.reduce((acc, cur) => acc + cur, 0)self.postMessage(result)self.close()
}