JS如何实现多线程计算

postMessage

postMessage

onmessage

// main.js (主线程)
if (window.Worker) {
    const myWorker = new Worker('worker.js');

    myWorker.postMessage({ type: 'calculate', data: 1000000000 }); // 发送数据给worker

    myWorker.onmessage = function(e) {
        console.log('主线程收到消息:', e.data);
        // 假设worker计算了斐波那契数列的第N项
        if (e.data.type === 'result') {
            document.getElementById('result').innerText = `计算结果：${e.data.value}`;
        }
    };

    myWorker.onerror = function(error) {
        console.error('Worker出错:', error);
    };

    // 偶尔我会忘记关闭worker，这其实是个小问题，尤其是在单页应用里
    // myWorker.terminate(); // 当不再需要时，记得终止worker
}

// worker.js (Worker线程)
function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

self.onmessage = function(e) {
    console.log('Worker收到消息:', e.data);
    if (e.data.type === 'calculate') {
        const num = e.data.data;
        const result = fibonacci(num > 40 ? 40 : num); // 避免计算量过大导致浏览器卡死，这里做了限制
        self.postMessage({ type: 'result', value: result }); // 将结果发回主线程
    }
};

window

postMessage

SharedArrayBuffer

Atomics

SharedArrayBuffer

Atomics

Atomics.add

Atomics.load

Atomics.store

Atomics.wait

Atomics.notify

// main.js (主线程)
// 记得要设置响应头：Cross-Origin-Opener-Policy: same-origin 和 Cross-Origin-Embedder-Policy: require-corp
// 否则SharedArrayBuffer是不可用的，这是出于安全考虑，为了防止Spectre/Meltdown攻击
if (window.Worker && window.SharedArrayBuffer) {
    const buffer = new SharedArrayBuffer(1024); // 创建一个1KB的共享缓冲区
    const view = new Int32Array(buffer); // 创建一个32位整数视图

    const worker1 = new Worker('worker1.js');
    const worker2 = new Worker('worker2.js');

    worker1.postMessage({ buffer: buffer, id: 1 });
    worker2.postMessage({ buffer: buffer, id: 2 });

    // 主线程也可以操作这块内存
    Atomics.add(view, 0, 10); // 初始值加10

    // 等待一段时间，让worker有机会执行
    setTimeout(() => {
        console.log('最终共享内存的值:', Atomics.load(view, 0));
    }, 100);
}

// worker1.js
self.onmessage = function(e) {
    const view = new Int32Array(e.data.buffer);
    const workerId = e.data.id;
    console.log(`Worker ${workerId} 初始值:`, Atomics.load(view, 0));
    Atomics.add(view, 0, 5); // 加5
    console.log(`Worker ${workerId} 修改后值:`, Atomics.load(view, 0));
};

// worker2.js
self.onmessage = function(e) {
    const view = new Int32Array(e.data.buffer);
    const workerId = e.data.id;
    console.log(`Worker ${workerId} 初始值:`, Atomics.load(view, 0));
    Atomics.add(view, 0, 7); // 加7
    console.log(`Worker ${workerId} 修改后值:`, Atomics.load(view, 0));
};

SharedArrayBuffer

Atomics