Web Workers：JavaScript 的多线程编程

Web Workers：JavaScript 的多线程编程

什么是 Web Workers？

Web Workers 允许在后台线程中运行脚本，不阻塞主线程。

Web Workers 的类型

创建 Worker

// main.js
const worker = new Worker('worker.js');

worker.postMessage('Hello from main');

worker.onmessage = (event) => {
console.log('收到消息:', event.data);
};

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

// worker.js
self.onmessage = (event) => {
console.log('Worker 收到:', event.data);

// 处理耗时任务
const result = heavyComputation(event.data);

self.postMessage(result);
};

function heavyComputation(data) {
// 耗时计算
return data;
}

数据传递

// 传递基本类型
worker.postMessage('hello');
worker.postMessage(42);
worker.postMessage(true);

// 传递对象（会被序列化）
worker.postMessage({ name: 'John', age: 30 });

// 传递二进制数据
const buffer = new ArrayBuffer(1024);
worker.postMessage(buffer, [buffer]);

终止 Worker

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

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

Shared Worker

// 多个页面共享同一个 Worker
const sharedWorker = new SharedWorker('shared-worker.js');

sharedWorker.port.start();
sharedWorker.port.postMessage('Hello');

sharedWorker.port.onmessage = (event) => {
console.log(event.data);
};

实际应用场景

场景一：数据处理

// worker.js
self.onmessage = (event) => {
const data = event.data;

// 处理大量数据
const result = data.map(item => processItem(item));

self.postMessage(result);
};

场景二：图像处理

// worker.js
self.onmessage = (event) => {
const imageData = event.data;

// 图像处理
for (let i = 0; i < imageData.data.length; i += 4) {
// 修改像素
imageData.data[i] = 255 – imageData.data[i]; // R
imageData.data[i + 1] = 255 – imageData.data[i + 1]; // G
imageData.data[i + 2] = 255 – imageData.data[i + 2]; // B
}

self.postMessage(imageData);
};

限制

const limitations = [
'不能访问 DOM',
'不能使用 window 对象',
'不能访问本地存储',
'不能跨域加载脚本'
];

最佳实践

const bestPractices = [
'用于耗时计算',
'避免频繁通信',
'合理使用传输对象',
'处理错误和异常'
];

总结

Web Workers 为 JavaScript 带来了多线程能力：

合理使用 Web Workers，提升应用性能。