编辑“︁JavaScript Web Worker”︁（章节）

= JavaScript Web Worker =

== 介绍 ==

'''Web Worker''' 是 JavaScript 中用于在后台线程执行脚本的技术，允许在不阻塞主线程的情况下运行复杂的计算任务。由于 JavaScript 是单线程语言，长时间运行的脚本可能导致页面无响应，而 Web Worker 提供了一种解决方案，使得开发者可以在独立的线程中执行代码，从而提高网页的性能和用户体验。

Web Worker 分为两种类型：
* '''专用 Worker (Dedicated Worker)'''：仅能被创建它的脚本使用。
* '''共享 Worker (Shared Worker)'''：可被多个脚本共享，适用于多窗口或多 iframe 通信。

== 基本用法 ==

=== 创建 Web Worker ===
要创建一个 Web Worker，需要提供一个单独的 JavaScript 文件，并在主线程中使用 `Worker` 构造函数实例化它。

<syntaxhighlight lang="javascript">
// 主线程代码 (main.js)
const worker = new Worker('worker.js');

worker.onmessage = function(event) {
    console.log('Received message from worker:', event.data);
};

worker.postMessage('Hello, Worker!');
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// Worker 线程代码 (worker.js)
self.onmessage = function(event) {
    console.log('Received message in worker:', event.data);
    self.postMessage('Hello, Main Thread!');
};
</syntaxhighlight>

'''输入：'''
* 主线程发送消息 `'Hello, Worker!'`。
* Worker 线程接收消息并回复 `'Hello, Main Thread!'`。

'''输出：'''
<pre>
Received message in worker: Hello, Worker!
Received message from worker: Hello, Main Thread!
</pre>

=== 终止 Worker ===
可以通过调用 `worker.terminate()` 在主线程中终止 Worker，或者在 Worker 内部调用 `self.close()`。

<syntaxhighlight lang="javascript">
// 主线程终止 Worker
worker.terminate();

// Worker 内部终止
self.close();
</syntaxhighlight>

== 通信机制 ==

Web Worker 通过 `postMessage` 和 `onmessage` 实现主线程与 Worker 线程之间的通信。数据以结构化克隆算法传递，支持大多数 JavaScript 数据类型（如对象、数组、字符串等），但不支持函数或 DOM 元素。

=== 传递复杂数据 ===
<syntaxhighlight lang="javascript">
// 主线程发送对象
worker.postMessage({
    type: 'calculate',
    data: [1, 2, 3, 4, 5]
});

// Worker 线程接收并处理
self.onmessage = function(event) {
    if (event.data.type === 'calculate') {
        const sum = event.data.data.reduce((a, b) => a + b, 0);
        self.postMessage({ result: sum });
    }
};
</syntaxhighlight>

'''输出：'''
<pre>
Received result from worker: { result: 15 }
</pre>

== 错误处理 ==

Worker 线程中的错误不会直接影响主线程，但可以通过监听 `onerror` 事件捕获。

<syntaxhighlight lang="javascript">
worker.onerror = function(error) {
    console.error('Worker error:', error.message);
};
</syntaxhighlight>

== 实际应用案例 ==

=== 1. 大数据计算 ===
Web Worker 适用于 CPU 密集型任务，如大数据排序或数学计算。

<syntaxhighlight lang="javascript">
// 主线程
const worker = new Worker('sort-worker.js');
worker.postMessage({ array: largeArray });

// sort-worker.js
self.onmessage = function(event) {
    const sortedArray = event.data.array.sort((a, b) => a - b);
    self.postMessage({ sortedArray });
};
</syntaxhighlight>

=== 2. 图像处理 ===
使用 Web Worker 处理 Canvas 图像数据，避免阻塞 UI。

<syntaxhighlight lang="javascript">
// 主线程
const canvasWorker = new Worker('image-processor.js');
canvasWorker.postMessage({ imageData: ctx.getImageData(0, 0, canvas.width, canvas.height) });

// image-processor.js
self.onmessage = function(event) {
    const imageData = applyFilters(event.data.imageData); // 应用滤镜
    self.postMessage({ processedImage: imageData });
};
</syntaxhighlight>

== 限制与注意事项 ==

* '''无 DOM 访问权限'''：Worker 线程无法直接操作 DOM 或访问 `window` 对象。
* '''同源策略'''：Worker 脚本必须与主脚本同源（或通过 CORS 允许）。
* '''性能开销'''：频繁创建和销毁 Worker 可能影响性能，建议复用 Worker。

== 高级用法 ==

=== 使用 SharedWorker ===
共享 Worker 允许多个窗口或 iframe 共享同一个 Worker 实例。

<syntaxhighlight lang="javascript">
// 主线程
const sharedWorker = new SharedWorker('shared-worker.js');
sharedWorker.port.onmessage = function(event) {
    console.log('Shared message:', event.data);
};
sharedWorker.port.postMessage('Hello from main thread!');
</syntaxhighlight>

=== 内联 Worker (Blob URL) ===
可以通过 Blob URL 动态创建 Worker，无需单独文件。

<syntaxhighlight lang="javascript">
const workerCode = `
    self.onmessage = function(e) {
        self.postMessage('Echo: ' + e.data);
    };
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));
</syntaxhighlight>

== 总结 ==

Web Worker 是 JavaScript 中实现多线程编程的关键技术，适用于：
* 计算密集型任务
* 后台数据处理
* 避免 UI 冻结

通过合理使用 Web Worker，可以显著提升网页的响应速度和用户体验。

== 参见 ==
* [[JavaScript Event Loop]]
* [[JavaScript BOM]]
* [[JavaScript Performance Optimization]]

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript BOM]]