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，可以使用 Worker 构造函数，并传入一个 JavaScript 文件路径：

// 主线程代码
const worker = new Worker('worker.js');

Worker 线程代码[编辑 | 编辑源代码]

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

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

主线程与 Worker 通信[编辑 | 编辑源代码]

主线程可以通过 postMessage 发送数据给 Worker，并通过监听 onmessage 事件接收结果：

// 主线程代码
worker.postMessage(10); // 发送数据给 Worker

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

实际应用案例[编辑 | 编辑源代码]

大规模数据处理[编辑 | 编辑源代码]

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

// 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);
}

主线程调用：

const worker = new Worker('worker.js');
worker.postMessage(40); // 计算第40项斐波那契数
worker.onmessage = function(e) {
    console.log('Result:', e.data); // 输出: 102334155
};

实时数据流处理[编辑 | 编辑源代码]

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

限制与注意事项[编辑 | 编辑源代码]

Web Workers 有一些限制：

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

高级用法[编辑 | 编辑源代码]

使用 Shared Workers[编辑 | 编辑源代码]

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

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