HTML5 Web Workers 详解：利用后台线程提升网页性能

这里要注意，Worker 内部使用 self 作为全局对象，而主线程使用 window。通信完全依赖消息传递，数据会被序列化传输。

2. 使用 Blob 动态创建

有时候我们不想单独维护一个 JS 文件，或者需要动态生成代码，这时可以用 Blob 对象直接在内存中创建 Worker。

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

这种方式适合临时性的轻量级任务，但要注意内存管理，用完记得销毁。

3. 终止 Worker

当任务完成不再需要时，务必调用 terminate() 方法立即终止 Worker，释放相关资源。

worker.terminate();

典型应用场景

Web Workers 最适合 CPU 密集型任务，避免主线程长时间被占用。常见的场景包括：

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

实战示例：斐波那契数列

下面是一个递归计算斐波那契数列的例子。如果在主线程直接计算第 40 项，浏览器可能会卡死几秒，但放在 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));
};

主线程

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

局限性与注意事项

虽然 Web Workers 很强大，但并不是万能药，使用时需注意以下限制：

1. 无法操作 DOM：Worker 里不能修改页面元素，所有 UI 更新必须在主线程完成。
2. 通信开销：主线程和 Worker 之间的数据传输涉及序列化，大量小数据包传输反而可能降低性能。
3. 同源策略：只能加载同源的脚本文件，跨域资源需配置 CORS。
4. 资源消耗：创建过多 Worker 会占用系统内存和 CPU，需按需分配。

总结

Web Workers 是提升 Web 应用性能的关键工具，特别适合处理高计算量任务。只要合理设计通信机制，避免频繁的小数据交换，就能有效保持页面流畅度。如果你正在开发涉及复杂计算或大数据处理的 Web 应用，Web Workers 绝对值得纳入技术选型。