javascript - 异步 Promise 阻塞 DOM

Question

异步 ​​Promise 在 React 中并没有像我预期的那样工作(特别是 React，但我认为这也适用于其他场景)。他们似乎仍然阻塞主线程，基本上卡住了我的浏览器。

我有这个方法来处理按钮点击:

onClick() {
  console.time('factorial')
  factorial(8000) // factorial is the culprit!
    .then(n => this.setState({ n }))
  console.endTime('factorial')
}

factorial 返回一个 promise ，因此，正如预期的那样，我在控制台中得到 factorial: 2ms 。但是，网页挂起。查看性能指标时，这一点也很明显:

Promise 需要 700 多毫秒来评估，并且在整个持续时间内，DOM 似乎被阻塞。这让我完全困惑，因为我希望 DOM 继续下去。如何让我的 factorial 函数不阻塞 DOM？

Answer 1

异步函数不是线程。

当它们等待 JavaScript 事件循环之外的事情发生(例如 HTTP 响应到达)时，它们会暂停并置于后台。

当它们运行时，它们仍然在运行，并且像任何其他函数一样绑定(bind)事件循环。

如果您想将某些处理分流到另一个线程，则需要使用 Web Workers 。 (至少在网络浏览器的上下文中；Node 有 Worker Threads )。