JS如何实现多线程计算

JavaScript的运行环境默认是单线程的，所有代码都在主线程中执行，当遇到大量数据计算、复杂循环等耗时操作时，会阻塞主线程的渲染和交互逻辑，导致页面出现卡顿。为了解决这类问题，Web Worker API被引入，它允许开发者在浏览器中创建独立于主线程的后台线程，实现多线程计算的效果。

Web Worker的基本工作原理

Web Worker创建的线程拥有独立的运行环境，不会共享主线程的全局作用域，两者之间通过消息传递机制进行通信。主线程和Worker线程都可以使用postMessage方法发送消息，通过监听onmessage事件接收消息，数据传递默认是拷贝形式，不会互相影响。

主线程中使用Web Worker的步骤

1. 创建Worker实例

主线程通过传入Worker脚本的路径来创建Worker实例，需要注意的是Worker脚本必须遵循同源策略，或者是通过Blob URL、模块方式加载。

// 主线程代码
// 创建Worker，传入Worker脚本的路径
const myWorker = new Worker('./worker.js');

// 监听Worker返回的消息
myWorker.onmessage = function(event) {
    console.log('主线程收到Worker计算结果:', event.data);
    // 计算完成后关闭Worker，释放资源
    myWorker.terminate();
};

// 向Worker发送计算任务和数据
const taskData = { num: 100000000 };
myWorker.postMessage(taskData);

2. 编写Worker脚本

Worker脚本运行在独立的线程中，不能直接操作DOM，也不能使用window对象下的部分属性和方法，但是可以使用self指代当前Worker的全局作用域。

// worker.js Worker脚本代码
// 监听主线程发送的消息
self.onmessage = function(event) {
    const data = event.data;
    const num = data.num;
    let result = 0;
    // 模拟耗时计算：累加1到num的所有整数
    for (let i = 1; i <= num; i++) {
        result += i;
    }
    // 将计算结果发送回主线程
    self.postMessage(result);
};

使用Blob URL创建内联Worker

如果不想单独创建Worker脚本文件，也可以通过Blob URL的方式创建内联Worker，适合简单的计算场景。

// 主线程代码
// 定义Worker内部的执行逻辑字符串
const workerScript = `
    self.onmessage = function(event) {
        const num = event.data;
        let sum = 0;
        for (let i = 1; i <= num; i++) {
            sum += i;
        }
        self.postMessage(sum);
    }
`;
// 将脚本字符串转为Blob对象
const blob = new Blob([workerScript], { type: 'application/javascript' });
// 创建Blob URL
const workerUrl = URL.createObjectURL(blob);
// 基于Blob URL创建Worker
const inlineWorker = new Worker(workerUrl);

inlineWorker.onmessage = function(event) {
    console.log('内联Worker计算结果:', event.data);
    // 释放Blob URL
    URL.revokeObjectURL(workerUrl);
    inlineWorker.terminate();
};

inlineWorker.postMessage(50000000);

多个Worker协同实现多线程计算

如果需要处理更复杂的计算任务，可以创建多个Worker线程，将大任务拆分后分配给不同的Worker并行处理，最后汇总结果。

// 主线程代码：拆分任务到多个Worker
const totalNum = 100000000;
const workerCount = 4; // 创建4个Worker线程
const segment = Math.floor(totalNum / workerCount);
let completedCount = 0;
let totalResult = 0;

for (let i = 0; i < workerCount; i++) {
    const start = i * segment + 1;
    const end = i === workerCount - 1 ? totalNum : (i + 1) * segment;
    const worker = new Worker('./segment_worker.js');
    
    worker.onmessage = function(event) {
        totalResult += event.data;
        completedCount++;
        if (completedCount === workerCount) {
            console.log('多Worker协同计算最终结果:', totalResult);
        }
        worker.terminate();
    };
    
    worker.postMessage({ start, end });
}

对应的segment_worker.js脚本内容如下：

// segment_worker.js 拆分任务Worker脚本
self.onmessage = function(event) {
    const { start, end } = event.data;
    let sum = 0;
    for (let i = start; i <= end; i++) {
        sum += i;
    }
    self.postMessage(sum);
};

使用注意事项

• Worker线程无法直接操作DOM，也不能访问window对象下的document、localStorage等属性，只能使用部分Web API。
• 主线程和Worker之间传递的数据默认是结构化克隆，对于大对象会有拷贝开销，必要时可以使用Transferable Objects转移数据的所有权，减少性能损耗。
• Worker适合处理纯计算类任务，不适合频繁传递小数据的场景，因为消息传递本身也有一定开销。
• 创建过多Worker线程会占用大量系统资源，需要根据实际任务情况合理控制线程数量。

JavaScriptWeb_Worker多线程计算postMessage修改时间：2026-07-03 13:42:11