JS 多線程 web worker 基本使用
簡介：
JS 是單線程，所有的任務都是在一個線程中完成的，也就是說，只能同時執行一個任務，因此有時多個任務同時進行的時候，會阻塞，比如UI會一直在渲染，同時還要進行復雜邏輯的處理，這時候我們就要使用多線程 worker
Worker的作用：
就是為 JavaScript 創造多線程環境，允許主線程創建 Worker 線程，將一些任務分配給后者運行。在主線程運行的同時，Worker 線程在后臺運行，兩者互不干擾。等到 Worker 線程完成計算任務，再把結果返回給主線程。這樣的好處是，一些計算密集型或高延遲的任務，被 Worker 線程負擔了，主線程（通常負責 UI 交互）就會很流暢，不會被阻塞或拖慢。
下面是 JavaScript Worker 的詳細使用步驟：
創建 Worker 對象
在主線程中創建 Worker 對象，傳入一個 JavaScript 文件的 URL，該文件會在 Worker 線程中運行。
const worker = new Worker('worker.js');創建 Message 事件監聽器
在主線程中為 Worker 對象添加 message 事件監聽器，用于接收 Worker 線程發送的消息。
worker.addEventListener('message', (event) => {
console.log('Received message from worker:', event.data);
});發送消息給 Worker 線程
在主線程中通過 postMessage() 方法向 Worker 線程發送消息。
worker.postMessage({type: 'calculate', data: [1, 2, 3]});在 Worker 線程中處理消息
在 Worker 線程中為 self 對象添加 message 事件監聽器，用于接收主線程發送的消息。
self.addEventListener('message', (event) => {
if (event.data.type === 'calculate') {
const result = calculate(event.data.data);
self.postMessage({type: 'result', data: result});
}
});
function calculate(data) {
return data.reduce((a, b) => a + b);
}發送消息給主線程
在 Worker 線程中通過 postMessage() 方法向主線程發送消息。
self.postMessage({type: 'result', data: result});需要注意的是，Worker 線程中不能直接操作 DOM，因為它們沒有訪問主線程的權限。如果需要操作 DOM，可以在 Worker 線程中處理數據，然后將處理結果通過 postMessage() 方法發送給主線程，在主線程中更新 DOM。
除了使用 JavaScript 文件創建 Worker 對象，還可以使用 Blob 對象或者 Data URL 創建 Worker 對象。Blob 對象可以動態生成 JavaScript 代碼，Data URL 可以將 JavaScript 代碼轉換為 Base64 編碼，并以字符串形式傳遞給 Worker 對象。
