HTML5 Web Workers 详解：提升网页性能与响应速度的关键

const workerScript = `
    self.onmessage = function(event) {
        let result = event.data * 2;
        self.postMessage(result);
    };
`;

const blob = new Blob([workerScript], { type: "application/javascript" });
const worker = new Worker(URL.createObjectURL(blob));

worker.onmessage = function(event) {
    console.log("Blob Worker 计算结果:", event.data);
};

worker.postMessage(10);

终止 Worker

任务完成后，记得清理资源。调用 terminate() 方法可以立即终止 Worker，防止内存泄漏。

worker.terminate();

典型应用场景

Web Workers 最适合处理 CPU 密集型任务，例如：

• 大规模数据计算：复杂数学运算、科学计算
• 媒体处理：图片滤镜、视频编码
• 实时数据处理：高并发 WebSocket 消息流
• 文件解析：读取大型 JSON 或 CSV 文件

示例：计算斐波那契数列

递归计算大数值的斐波那契数列会占用大量 CPU。如果在主线程直接运行，浏览器会卡死。使用 Worker 则能保持界面流畅。

// worker.js
self.onmessage = function(event) {
    function fibonacci(n) {
        return n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2);
    }
    self.postMessage(fibonacci(event.data));
};

// 主线程
const worker = new Worker("worker.js");
worker.onmessage = function(event) {
    console.log("斐波那契结果:", event.data);
};
worker.postMessage(40); // 计算第 40 个斐波那契数

局限性与注意事项

虽然 Web Workers 很强大，但使用时也要清楚它的边界：

1. 无法操作 DOM：Worker 内部不能修改 HTML 元素，所有 UI 更新必须通过主线程完成。
2. 通信开销：主线程和 Worker 之间的数据传输是复制拷贝的，频繁传递大数据可能反而降低性能。
3. 同源限制：Worker 脚本必须与主页面同源。
4. 资源成本：创建过多 Worker 会增加系统负担，需按需分配。

总结

Web Workers 是优化 Web 应用性能的重要工具，特别适用于需要长时间计算而不希望冻结界面的场景。只要合理设计通信机制，避免过度依赖，就能在保证用户体验的同时发挥其最大效能。