HTML5 Web Workers 详解：解决主线程阻塞的性能方案

使用 Blob 方式创建 Worker

在某些情况下，我们可能不希望单独创建 worker.js 文件，而是直接在主线程中创建 Worker。可以使用 Blob 方式实现：

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

这种方式适合小型逻辑或动态生成的脚本，避免了额外的 HTTP 请求。

终止 Worker

当 Worker 任务完成后，可以调用 worker.terminate() 立即终止它，以释放资源：

worker.terminate();

Web Workers 的应用场景

Web Workers 适用于处理 CPU 密集型任务，例如：

• 大规模数据计算（如复杂数学计算、科学计算）
• 图片和视频处理（如图像滤镜、视频编码）
• 实时数据处理（如 WebSockets 处理高并发数据流）
• 文件操作（如解析大型 JSON、CSV 文件）

示例：计算斐波那契数列

这是一个典型的递归计算场景，如果在主线程执行会明显卡顿：

// 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 的局限性

尽管 Web Workers 提供了异步执行能力，但它们仍然存在一些限制：

• 无法直接操作 DOM（不能修改 HTML 元素）
• 主线程和 Worker 之间的通信有开销（数据通过 postMessage 传递，大对象涉及序列化）
• 受同源策略限制（只能加载同源的脚本）
• 线程创建和管理成本高（创建大量 Worker 可能会影响性能）

结论

Web Workers 是提升 Web 应用性能的强大工具，特别适用于需要进行高计算量的任务。然而，由于它无法操作 DOM，并且数据传输存在一定开销，因此需要合理使用，以确保整体性能的优化。如果你正在开发需要执行复杂计算或处理大量数据的 Web 应用，Web Workers 是一个值得考虑的技术。