JavaScript Promise：同步密集型计算异步化问题与替代方案

我希望包装某些长耗时的同步计算，使调用者在计算执行期间可以自由执行其他操作。

示例代码 #

const longRunning = ms => {
    const end = Date.now() + ms
    while (Date.now() < end) continue
}

const asyncWrappedA = async (ms) =>
    new Promise<void>(resolve => {
        longRunning(ms);
        resolve();
    });

const asyncWrappedB = async (ms) =>
    new Promise<void>(resolve => {
        setTimeout(() => {
            longRunning(ms);
            resolve()
        }, 0);
    });

(async () => {
    const funcs = [asyncWrappedA, asyncWrappedB];

    for (const i in funcs) {
        const name = funcs[i].name;
        const start = Date.now();
        const promise = funcs[i](1000);
        console.log(name + " promise returned: +" + (Date.now() - start));
        promise.then(
            () => {console.log(name + " then: +" + (Date.now() - start));}
        );
    }
})()

输出结果 #

asyncWrappedA promise returned: +1000
asyncWrappedB promise returned: +0
asyncWrappedA then: +1002
asyncWrappedB then: +1002

正如所见，使用setTimeout的asyncWrappedB达到了预期效果。我原以为仅用new Promise包装即可实现异步，但实际并非如此。

问题 #

1. 为何asyncWrappedA无法立即返回？
2. 不使用setTimeout（我认为这是一种取巧方式），实现该目标的更好方法是什么？

解答 #

1. asyncWrappedA无法立即返回的原因 #

new Promise的执行器函数是同步执行的。当调用asyncWrappedA(1000)时，会立刻执行Promise构造函数里的代码——直接调用longRunning(ms)，这个同步阻塞的while循环会完全占用主线程直到执行完毕。只有等longRunning结束后，resolve()才会被调用，asyncWrappedA才会返回Promise实例，所以做不到立即返回。

2. 更优实现方案：使用Worker线程 #

不管是浏览器还是Node.js环境，都提供了专门的Worker机制，能将计算任务移出主线程，真正实现无阻塞的异步执行，这是比setTimeout更标准、彻底的方案。

浏览器环境：Web Worker

首先创建独立的Worker脚本文件（比如long-running-worker.js）：

// long-running-worker.js
self.onmessage = (e) => {
  const ms = e.data;
  const end = Date.now() + ms;
  while (Date.now() < end) continue;
  self.postMessage('计算完成');
};

然后在主脚本中调用：

const asyncWithWebWorker = (ms) => {
  return new Promise((resolve) => {
    const worker = new Worker('./long-running-worker.js');
    worker.postMessage(ms);
    worker.onmessage = () => {
      worker.terminate(); // 任务完成后关闭Worker
      resolve();
    };
  });
};

Node.js环境：Worker Threads

const { Worker, isMainThread, parentPort } = require('worker_threads');

const longRunning = ms => {
  const end = Date.now() + ms;
  while (Date.now() < end) continue;
};

// Worker线程逻辑
if (!isMainThread) {
  parentPort.on('message', (ms) => {
    longRunning(ms);
    parentPort.postMessage('计算完成');
  });
}

// 主线程调用函数
const asyncWithWorkerThread = (ms) => {
  return new Promise((resolve) => {
    const worker = new Worker(__filename);
    worker.postMessage(ms);
    worker.on('message', () => {
      worker.terminate();
      resolve();
    });
  });
};

Worker机制的优势在于：它是独立的执行线程，不会占用主线程的事件循环，调用者可以在计算期间完全自由执行其他操作；同时在多核CPU环境下，Worker还能利用额外的CPU核心进行并行计算，效率远高于setTimeout的“延迟排队执行”方案。

内容的提问来源于stack exchange，提问作者pointyhat