Articles
JavaScript简介
JavaScript中的Web Workers

JavaScript中的Web Workers

本文解释了JavaScript中的Web Workers。

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

Web Worker 在 JavaScript 中是一种机制，可以让代码在与主线程分离的线程中运行。这允许对繁重的计算和长时间运行的操作进行异步操作，防止主线程被阻塞。通过使用 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，因此无法直接操作 UI。
使用场景
  • 适用于图像处理、数据分析和加密等繁重计算过程。
  • 可以在您不希望阻塞主线程时使用。

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/XMLHttpRequestJavaScript中的 `Service Worker`