深入理解 Web Worker

典型应用场景

1. 密集型计算

比如计算斐波那契数列，如果直接在主线程递归，界面会瞬间卡死。使用 Worker 可以将计算逻辑剥离。

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

2. 图片处理

图像处理涉及大量像素操作，非常适合放入 Worker。注意这里使用了 transferable objects 来优化传输效率。

// image-processor-worker.js
self.onmessage = function(e) {
    const imageData = e.data;
    const processedData = processImage(imageData);
    // 转移所有权，避免拷贝
    self.postMessage(processedData, [processedData.data.buffer]);
};

function processImage(imageData) {
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
        const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i] = avg;     // R
        data[i + 1] = avg; // G
        data[i + 2] = avg; // B
    }
    return imageData;
}

3. 批量数据处理

在处理大型数据集时，可以结合 Promise 封装 Worker 通信，让代码更简洁。

// data-processor-worker.js
self.onmessage = function(e) {
    const { data, operation } = e.data;
    const result = processData(data, operation);
    self.postMessage(result);
};

function processData(data, operation) {
    switch (operation) {
        case 'filter': return data.filter(item => item.value > 100);
        case 'sort': return [...data].sort((a, b) => a.value - b.value);
        case 'aggregate': return data.reduce((acc, item) => acc + item.value, 0);
        default: return data;
    }
}

高级通信机制

Transferable Objects

对于大对象（如 ArrayBuffer），普通的消息传递会进行深拷贝，消耗巨大。使用 Transferable Objects 可以直接转移内存所有权，大幅提升性能。

// 主线程
const buffer = new ArrayBuffer(1024);
worker.postMessage(buffer, [buffer]);

// Worker
self.onmessage = function(e) {
    const buffer = e.data;
    // 此时主线程的 buffer 已失效，Worker 独占使用权
};

MessageChannel

如果需要双向通信或建立持久连接，可以使用 MessageChannel。

// 主线程
const channel = new MessageChannel();
worker.postMessage({ port: channel.port2 }, [channel.port2]);
channel.port1.onmessage = function(e) {
    console.log('收到消息:', e.data);
};

// Worker
self.onmessage = function(e) {
    const port = e.data.port;
    port.onmessage = function(e) {
        console.log('收到消息:', e.data);
        port.postMessage('回复消息');
    };
};

性能优化与注意事项

在实际开发中，有几个关键点需要注意：

1. 合理划分任务：不要把所有活都扔给 Worker，小任务反而增加通信开销。建议将大任务拆分为小块分批处理。
2. 及时释放资源：不再需要时调用 terminate()，否则会造成内存泄漏。
3. 减少通信频率：尽量合并数据一次性发送，避免频繁的主线程与 Worker 交互。
4. 调试难度：Worker 的堆栈信息可能不完整，建议使用 Chrome DevTools 的 Workers 面板进行调试。
5. 浏览器兼容性：虽然主流浏览器支持良好，但在旧版 IE 中不可用，需做降级处理。

总结

Web Worker 为 JavaScript 带来了真正的多线程能力。通过合理使用，我们可以显著提升应用性能，改善用户体验，并构建更复杂的后端逻辑。掌握这一技术，能让你的前端工程能力迈上一个新台阶。

参考资料

• MDN - Web Workers API
• W3C - Web Workers 规范