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` 构造函数实例化它。

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

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

worker.postMessage('Hello, Worker!');

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

输入：

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

输出：

Received message in worker: Hello, Worker!
Received message from worker: Hello, Main Thread!

终止 Worker

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

// 主线程终止 Worker
worker.terminate();

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

通信机制

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

传递复杂数据

// 主线程发送对象
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 });
    }
};

输出：

Received result from worker: { result: 15 }

错误处理

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

worker.onerror = function(error) {
    console.error('Worker error:', error.message);
};

实际应用案例

1. 大数据计算

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

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

2. 图像处理

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

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

限制与注意事项

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

高级用法

使用 SharedWorker

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

// 主线程
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!');

内联 Worker (Blob URL)

可以通过 Blob URL 动态创建 Worker，无需单独文件。

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

总结

Web Worker 是 JavaScript 中实现多线程编程的关键技术，适用于：

• 计算密集型任务
• 后台数据处理
• 避免 UI 冻结

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

参见

• JavaScript Event Loop
• JavaScript BOM
• JavaScript Performance Optimization