深入理解 HTML5 Web Workers：提升网页性能的核心技术

高级应用

使用 Blob 创建 Worker

如果不想单独维护文件，可以直接利用 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);

终止 Worker

任务完成后应及时释放资源，调用 terminate() 可立即停止 Worker：

worker.terminate();

应用场景

Web Workers 主要适用于 CPU 密集型任务，例如：

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

实战示例：斐波那契数列

下面是一个典型的递归计算场景，如果在主线程直接计算第 40 项可能会导致界面卡顿：

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 只能负责计算。
2. 通信开销：主线程与 Worker 之间的数据传输需要序列化，大量小数据包传输可能得不偿失。
3. 同源策略：Worker 脚本必须来自同源服务器。
4. 资源消耗：创建过多 Worker 会占用较多内存，需按需分配。

总结

Web Workers 是优化 Web 应用性能的重要工具，特别适合处理高计算量任务。尽管存在无法操作 DOM 和通信开销的限制，但只要合理设计架构，就能有效避免页面假死，提供更流畅的用户体验。