编辑“︁HTML Web Workers”︁（章节）

= HTML Web Workers =

'''HTML Web Workers''' 是一种在后台运行 JavaScript 代码的技术，允许开发者执行复杂的计算任务而不会阻塞用户界面（UI）线程。Web Workers 使得网页能够保持响应性，即使在进行大量数据处理时也是如此。

== 介绍 ==

在传统的 JavaScript 执行模型中，所有代码都在主线程（UI 线程）上运行。如果执行长时间运行的任务（如大规模计算或网络请求），页面可能会变得无响应，导致用户体验下降。Web Workers 通过创建一个独立的线程（称为 Worker 线程）来解决这个问题，允许在后台执行脚本而不干扰主线程。

Web Workers 分为两种类型：
* '''Dedicated Workers'''（专用 Worker）：仅能被创建它的脚本访问。
* '''Shared Workers'''（共享 Worker）：可以被多个脚本共享，甚至跨不同的窗口或 iframe。

== 基本用法 ==

=== 创建 Web Worker ===
要创建一个 Web Worker，可以使用 <code>Worker</code> 构造函数，并传入一个 JavaScript 文件路径：

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

=== Worker 线程代码 ===
在 <code>worker.js</code> 文件中，可以编写在 Worker 线程中运行的代码。Worker 线程不能直接访问 DOM，但可以通过 <code>postMessage</code> 与主线程通信：

<syntaxhighlight lang="javascript">
// worker.js
self.onmessage = function(e) {
    console.log('Worker received message:', e.data);
    const result = e.data * 2; // 示例计算
    self.postMessage(result); // 发送结果回主线程
};
</syntaxhighlight>

=== 主线程与 Worker 通信 ===
主线程可以通过 <code>postMessage</code> 发送数据给 Worker，并通过监听 <code>onmessage</code> 事件接收结果：

<syntaxhighlight lang="javascript">
// 主线程代码
worker.postMessage(10); // 发送数据给 Worker

worker.onmessage = function(e) {
    console.log('Main thread received result:', e.data); // 输出: 20
};
</syntaxhighlight>

== 实际应用案例 ==

=== 大规模数据处理 ===
Web Workers 非常适合处理大数据集，例如图像处理或科学计算。以下是一个简单的示例，计算斐波那契数列：

<syntaxhighlight lang="javascript">
// worker.js
self.onmessage = function(e) {
    const n = e.data;
    const result = fibonacci(n);
    self.postMessage(result);
};

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}
</syntaxhighlight>

主线程调用：
<syntaxhighlight lang="javascript">
const worker = new Worker('worker.js');
worker.postMessage(40); // 计算第40项斐波那契数
worker.onmessage = function(e) {
    console.log('Result:', e.data); // 输出: 102334155
};
</syntaxhighlight>

=== 实时数据流处理 ===
Web Workers 可以用于处理来自 WebSocket 或其他实时数据源的流数据，避免主线程阻塞。

== 限制与注意事项 ==

Web Workers 有一些限制：
* 不能直接访问 DOM 或 <code>window</code> 对象。
* 不能使用某些同步 API（如 <code>alert</code> 或 <code>localStorage</code>）。
* 通信通过消息传递（<code>postMessage</code>）进行，数据是复制的而非共享的（除非使用 <code>SharedArrayBuffer</code>）。

== 高级用法 ==

=== 使用 Shared Workers ===
Shared Workers 允许多个页面共享同一个 Worker 实例：

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

=== 终止 Worker ===
可以通过调用 <code>terminate()</code> 手动终止 Worker：

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

== 性能优化 ==

Web Workers 可以显著提升性能，尤其是在以下场景：
* 计算密集型任务（如加密、图像处理）。
* 大数据集排序或过滤。
* 避免主线程阻塞的长时间运行操作。

== 总结 ==

HTML Web Workers 提供了一种强大的方式，使得 JavaScript 可以在后台线程中运行，从而保持页面的响应性。通过合理的任务分配和通信机制，可以显著提升网页性能和用户体验。

== 参见 ==
* [[JavaScript 异步编程]]
* [[HTML5 API]]
* [[WebSocket 实时通信]]

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML高级特性]]