计算密集型调用期间如何避免UI冻结并强制页面重绘？

这个问题我之前也碰到过，确实挺影响用户体验的！核心原因是浏览器的JavaScript执行和UI渲染共享同一个主线程，同步运行的长耗时函数会把渲染任务给堵在后面——哪怕你先给按钮加了disabled类，浏览器也得等当前的JS任务全部跑完，才会去处理重绘操作。

下面给你几个可行的解决办法：

1. 用setTimeout把长函数放到下一个事件循环 #

这是最常用也最简单的方案，把长耗时函数塞进setTimeout里（哪怕延迟设为0毫秒），这样浏览器会先完成当前的渲染任务，再去执行这个长函数：

button.addEventListener('click', function(){ 
  this.classList.add('disabled'); 
  setTimeout(() => {
    aFunctionThatTakesLongToExecute(); 
  }, 0);
});

setTimeout的0毫秒并不是真的立刻执行，而是告诉浏览器：“当前任务队列干完后，再执行这个回调”，这样就给了浏览器足够的时间去渲染按钮的disabled样式。

2. 用requestAnimationFrame贴合渲染周期 #

如果你想更精准地贴合浏览器的渲染节奏，可以用两次嵌套的requestAnimationFrame：

button.addEventListener('click', function(){ 
  this.classList.add('disabled'); 
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      aFunctionThatTakesLongToExecute(); 
    });
  });
});

第一次requestAnimationFrame的回调会在当前帧的重绘前触发，第二次则会在下一帧的重绘前执行——这样中间浏览器已经完成了一次重绘，按钮的禁用样式会先显示出来，再跑长函数。

3. 强制触发重绘（读取布局属性） #

还有一种“硬核”方法：读取一些需要浏览器实时计算布局的属性，比如offsetHeight、getBoundingClientRect()，这些属性会迫使浏览器立即完成当前的布局和重绘操作：

button.addEventListener('click', function(){ 
  this.classList.add('disabled'); 
  // 强制浏览器重绘，void避免返回值被误用
  void this.offsetHeight; 
  aFunctionThatTakesLongToExecute(); 
});

不过要注意：这种方法虽然有效，但如果滥用可能会影响性能，因为它会打断浏览器原本的渲染优化节奏。

额外建议：用Web Worker处理纯计算任务 #

如果aFunctionThatTakesLongToExecute是纯计算逻辑（不需要操作DOM），那最好的方案是把它放到Web Worker里运行——Web Worker在独立的线程中执行，完全不会阻塞主线程的UI渲染，用户体验会更流畅。

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