HTML - Web Workers API

關於 Web Workers

你好，未來的網頁開發者！今天，我們將要深入探索 Web Workers 的精彩世界。作為你們親切友善的電腦老師，我非常高興能夠引導你們走過這段旅程。所以，戴上你們的虛擬安全帽，我們來開始工作吧！

Web Workers 是什麼？

想像你在一個熙熙攘攘的廚房裡。你是主廚（那就是你的主要 JavaScript 代碼），而你有一頓複雜的餐點要準備。如果你能有一些副廚來幫助你，豈不是很好？在網頁開發的世界中，Web Workers 就正是這樣的小助手！

Web Workers 是在背景中運行腚本的助手，與你的主網頁分開。它們讓你能够執行耗時任務，而不會干擾網頁用戶界面的性能。

以下是如何創建 Web Workers 的簡單範例：

// 在你的主 JavaScript 檔案中（我們稱之為 main.js）
const myWorker = new Worker('worker.js');

在這段代碼中，我們創建了一個新的 Web Worker，並告訴它使用 'worker.js' 中的腚本。這就像雇用一個新的副廚並給他們菜譜一樣！

為什麼需要 Web Workers？

現在，你可能會想，"我們為什麼需要這些 Web Workers？" 好問題！讓我透過一個真實世界的場景來解釋。

你有沒有使用過在處理某些東西時變得不響應的網站？也許你正在上傳一個大文件，而整個頁面都凍結了。這是因為 JavaScript 傳統上在單一線程上運行，意味著它一次只能做一件事。

Web Workers 通過讓我們在背景中、在不同的線程上運行腚本來解決這個問題。這意味著即使有大量的計算正在進行，你的主頁面仍然保持響應。

Web Workers 如何工作？

讓我們更深入地了解這些神奇的 Web Workers 實際上是如何工作的。這一切都是關於通信！

以下是一個主腚本和工作腚本之間可能進行的通信範例：

// 在 main.js 中
const myWorker = new Worker('worker.js');

myWorker.postMessage('你好，Worker！');

myWorker.onmessage = function(e) {
console.log('從 worker 接收到的訊息：', e.data);
};

// 在 worker.js 中
self.onmessage = function(e) {
console.log('從主腚本接收到的訊息：', e.data);
self.postMessage('你好，主腚本！');
};

在這個範例中，我們的主腚本使用 postMessage() 發送訊息給 worker。Worker 接收這個訊息，記錄它，然後將訊息發送回主腚本。這就像一場數據的乒乓球遊戲！

停止 Web Workers

有時候，你可能需要停止一個 Web Worker。也許它已經完成了任務，或者你可能需要釋放一些資源。以下是如何做到這一點：

// 在 main.js 中
myWorker.terminate();

這行代碼告訴 worker，"謝謝你的幫助，但我們這裡已經完成了！" Worker 將立即停止。

處理錯誤

即使是我們這些有用的 Web Workers 有時也會犯錯誤。準備好應對這些情況是很重要的。以下是如何處理錯誤：

// 在 main.js 中
myWorker.onerror = function(error) {
console.log('錯誤：' + error.message);
};

// 在 worker.js 中
try {
// 一些可能會導致錯誤的代碼
} catch(error) {
self.postMessage('發生錯誤：' + error.message);
}

在這個範例中，我們在主腚本中設置了一個錯誤處理程序。如果 worker 中發生錯誤，我們可以捕獲它並將訊息發送回主腚本。

檢查瀏覽器支援

在我們開始使用 Web Workers 之前，總是個好主意檢查用戶的瀏覽器是否支援它們。以下是如何做到這一點的簡單方法：

if (typeof(Worker) !== "undefined") {
// 太好了！Web Workers 受支援
const myWorker = new Worker('worker.js');
} else {
// 抱歉，Web Workers 不受支援
console.log('你的瀏覽器不支援 Web Workers。');
}

這段代碼檢查 Worker 物件是否存在。如果存在，我們可以繼續創建我們的 worker。如果不存在，我們可以提供一個替代方案或通知用戶。

Web Worker 方法

以下是常用的 Web Worker 方法列表：

方法	描述
`postMessage()`	發送訊息給 worker/main 腳本
`onmessage`	接收訊息的事件處理程序
`terminate()`	立即停止 worker
`onerror`	錯誤處理的事件處理程序

記住，熟能生巧！嘗試創建你自己的 Web Workers 並嘗試不同的任務。你會對它們如何提升你的網頁應用程序感到驚訝。

總結來說，Web Workers 是強大的工具，可以顯著提高你的網頁應用程序的性能。它們讓你能够運行複雜計算而不會凍結用戶界面，從而帶來更平滑、更響應的用戶體驗。所以下次你建造一個需要做一些重活的網頁應用程序時，記住你那些有用的副廚——Web Workers！

開心地編程，願你的 Web Workers 始終富有成效！

Credits: Image by storyset