Articles
JavaScript 簡介
JavaScript 中的 Web Worker

JavaScript 中的 Web Worker

本文介紹了 JavaScript 中的 Web Worker。

YouTube Video

javascript-web-worker.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-web-worker.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-web-worker.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-web-worker.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

JavaScript 中的 Web Worker

JavaScript 中的 Web Worker 是一種機制，允許程式碼在與主線程分開的線程中執行。這使得繁重計算和長時間運行的操作可以異步執行，從而防止阻塞主線程。透過使用 Web Worker，可以提高用戶界面的響應速度並提升應用程式的性能。

Web Worker 的基本用法

讓我們來看看 Web Worker 的基本用法。

通過指定一個 JavaScript 檔案即可建立新的 Web Worker。

1// worker.js (created as a separate file)
2onmessage = function(event) {
3    // Receive a message
4    const data = event.data;
5    // Perform heavy computation or processing
6    const result = data * 2;
7    // Return the result to the main thread
8    postMessage(result);
9};
 1// Main thread (main.js)
 2const worker = new Worker('worker.js');
 3
 4// Send a message to the worker
 5worker.postMessage(10);
 6
 7// Receive a message from the worker
 8worker.onmessage = function(event) {
 9    console.log('Result from Worker: ', event.data); // Result: 20
10};
11
12// Error handling
13worker.onerror = function(error) {
14    console.error('Worker error: ', error);
15};
  • 這段程式碼展示了如何使用 Web Worker 從主線程請求計算並非同步接收結果的基本機制。它傳送 10 作為訊息給 Web Worker，並接收 20 作為結果訊息。主線程和 Web Worker 透過發送和接收訊息來請求和獲取處理結果進行通訊。

基本功能

Web Worker 提供以下基本功能：。

  • postMessage 和 onmessage 用於主線程與 Web Worker 之間的訊息傳遞與接收。使用 postMessage 發送數據，使用 onmessage 接收數據。
  • 線程獨立性 Web Worker 完全獨立於主線程運作。因此，無法訪問主線程中定義的變量和函數。需要通過 postMessage 傳遞必要數據。
  • 腳本導入 在 Web Worker 中載入外部腳本可以使用 importScripts()。
1// mathUtils.js
2function double(n) {
3    return n * 2;
4}
1// worker.js
2importScripts('mathUtils.js');
3
4onmessage = function(event) {
5    const input = event.data;
6    const result = double(input); // mathUtils.jsの関数を使用
7    postMessage(result);
8};
 1// Main thread (main.js)
 2const worker = new Worker('worker.js');
 3
 4// Send a message to the worker
 5worker.postMessage(10);
 6
 7// Receive a message from the worker
 8worker.onmessage = function(event) {
 9    console.log('Result from Worker: ', event.data); // Result: 20
10};
11
12// Error handling
13worker.onerror = function(error) {
14    console.error('Worker error: ', error);
15};

另外，你也可以像下方那樣使用 import。

1// lib.js
2
3// Simulated CPU-intensive task
4export function doHeavyWork(n) {
5    return n * 2;
6}
1// worker.js
2import { doHeavyWork } from './lib.js';
3
4self.onmessage = (event) => {
5  const data = event.data;
6  const result = doHeavyWork(data);
7  self.postMessage(result);
8};
 1// Main thread (main.js)
 2const worker = new Worker('worker.js', { type: 'module' });
 3
 4// Send a message to the worker
 5worker.postMessage(10);
 6
 7// Receive a message from the worker
 8worker.onmessage = function(event) {
 9    console.log('Result from Worker: ', event.data); // Result: 20
10};
11
12// Error handling
13worker.onerror = function(error) {
14    console.error('Worker error: ', error);
15};
  • 在建立 new Worker 時指定 type: 'module' 參數，可以將 worker 視為 ES 模組並使用 import 語法。

Web Worker 和 async 函數的區別

Web Worker

特性
  • 線程隔離 Web Worker 在獨立的線程中執行 JavaScript 程式碼。這允許進行高負載的計算處理，而不會阻塞主執行緒（UI 執行緒）。
  • 並行處理 使用 Web Worker 可以讓 JavaScript 程式在多個線程中進行並行處理。
  • 訊息通訊 Web Worker 和主線程不會直接共享資料，而是透過 postMessage 和 onmessage 來交換訊息。
  • 無法操作 UI Web Worker 無法存取 DOM，因此無法直接操作使用者介面。
應用場景
  • 適用於圖像處理、數據分析和加密等高負載計算處理。
  • 當您不希望阻塞主執行緒時可以使用。

async

特性
  • 簡化非同步處理 async 函式是一種使非同步處理更易讀的語法，其內部實作基於 Promise。
  • 單一線程 所有的 async 函式都在主線程執行。因此，您需要設計方法來避免阻塞 UI 執行緒。
  • 適合 I/O 操作 它適用於網路通訊或檔案讀取等非同步任務，但不適合繁重的運算。
應用場景
  • 它適用於如 API 請求等的網路通訊。
  • 它適用於使用瀏覽器 API 或 Node.js 進行檔案讀寫。

主要差異

特性 Web Worker async
執行環境 獨立執行緒 主執行緒
目的 平行處理，分攤重計算工作負載 簡潔描述非同步操作
DOM 訪問 無法訪問 可訪問
通信方式 訊息傳遞（例如，postMessage） 不需要（通過直接函數調用或 await 處理）
使用場景 耗時計算，數據分析 I/O 操作，API 調用

如何選擇使用情況

對於 CPU 密集型任務，可以使用 Web Worker 減輕主執行緒的負載。另一方面，對於網路通信或 I/O 操作，可以使用 async/await 簡化代碼。

通過恰當結合兩者，可實現高效的非同步處理。

Web Worker 使用範例

分擔繁重計算的示例

接下來是一個卸載繁重計算的範例。

 1// worker.js
 2onmessage = function(event) {
 3    const num = event.data;
 4    const result = fibonacci(num);
 5    postMessage(result);
 6};
 7
 8function fibonacci(n) {
 9    if (n <= 1) return n;
10    return fibonacci(n - 1) + fibonacci(n - 2);
11}
1// Main thread
2const worker = new Worker('worker.js');
3
4worker.onmessage = function(event) {
5    console.log('Fibonacci result: ', event.data);
6};
7
8worker.postMessage(40); // Delegate heavy computation to the worker
  • 這段程式碼示範如何使用 Web Worker 將像是費波那契數列計算這種繁重任務從主線程中分離並執行。

指定任務名稱的範例

接下來是一個通過指定任務名稱來收發訊息的範例。

 1// worker.js
 2self.onmessage = function(event) {
 3    switch (event.data.task) {
 4        case 'add':
 5            const result = event.data.a + event.data.b;
 6            self.postMessage({ task: 'result', value: result });
 7            break;
 8        default:
 9            self.postMessage({ task: 'error', message: 'Invalid Task' });
10    }
11};
 1// Main thread
 2const worker = new Worker('worker.js');
 3
 4worker.onmessage = function(event) {
 5    switch (event.data.task) {
 6        case 'result':
 7            console.log('Task result: ', event.data.value);
 8            break;
 9        case 'error':
10            console.error('Error: ', event.data.message);
11            break;
12    }
13};
14
15worker.postMessage({ task: 'add', a: 10, b: 20 });
  • 這段程式碼根據訊息中的 task 名稱分發處理，Web Worker 會將計算結果或錯誤與任務名稱一起回傳給主線程。

注意事項

使用 Web Worker 時，請留意下列事項：。

  • 無法存取 DOM Web Worker 無法操作 UI 也無法存取 DOM。DOM 操作需要在主線程中執行。
  • 通訊開銷 主線程與 Web Worker 之間資料交換會產生一些開銷。這可能會影響性能，尤其是在頻繁傳輸大量數據時。
  • 同源政策 Web Worker 腳本必須遵守同源政策。無法從不同的域加載腳本。

使用 Web Worker 可提升應用程式的性能與響應性，但需要考慮到像無法操作 DOM 等限制，適當使用是很重要的。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

在 JavaScript 中的 Fetch/XMLHttpRequest`Service Worker` 在 JavaScript 中