如何使用Async/Await保证网页UI响应？CPU密集任务阻塞问题求助

你误解了async/await的生效前提：async关键字不会自动将同步CPU密集型计算转为后台执行，你编写的BigFunction虽然标注了async，但内部没有任何异步等待逻辑，执行时会同步占用主线程直到所有计算完成，自然会阻塞UI响应。
你之前看到的描述成立的前提是：await等待的是本身不占用JS主线程的异步任务（比如网络请求、定时器、IO操作等），此时才会让出主线程给消息循环处理UI事件。而你的场景是纯CPU密集计算，全程占用主线程，自然达不到预期效果。

方案1：主线程分片计算（轻量场景适用） #

通过主动插入await逻辑，在计算过程中定期让出主线程处理UI事件，实现方式如下：

async BigFunction()
  {
    var r = 0;

    for(var i = 0; i < 10000; i++)
    {
      for(var j = 0; j < 1000; j++)
      {
        for(var k = 0; k < 1000; k++)
        {
          r = Math.sin(4);
        }
        // 每完成100次内层循环让出一次主线程，可根据需要调整频率
        if (j % 100 === 0) {
          await new Promise(resolve => setTimeout(resolve, 0))
        }
      }
    }
    
    return r;
  }

该方案无需额外线程，改造成本低，缺点是会小幅增加总计算时长。

方案2：Web Worker后台计算（CPU密集场景首选） #

将纯计算逻辑放到独立的Worker线程执行，完全不占用主线程，UI全程流畅：

1. 新建单独的Worker文件calculate.worker.js：

// calculate.worker.js
self.onmessage = () => {
  var r = 0;
  for(var i = 0; i < 10000; i++)
  {
    for(var j = 0; j < 1000; j++)
    {
      for(var k = 0; k < 1000; k++)
      {
        r = Math.sin(4);
      }
    }
  }
  self.postMessage(r)
}

2. 主线程点击事件调用逻辑：

OnPressed(): void {
  const calculateWorker = new Worker('./calculate.worker.js')
  calculateWorker.postMessage('start')
  calculateWorker.onmessage = (e) => {
    // 拿到计算结果 e.data，处理后续逻辑
    calculateWorker.terminate() // 销毁Worker释放资源
  }
}

该方案总计算时长和原逻辑基本一致，UI完全无阻塞，是处理前端重计算场景的标准方案。

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