JS addClass() UI重绘/渲染异常：加载器无法正常显示问题

这个问题的核心原因是浏览器的单线程事件循环机制：当你同步执行耗时JS代码时，浏览器的UI渲染线程会被阻塞，没办法及时处理你添加show类后的重绘请求。也就是说，你添加类、执行耗时代码、移除类这三个操作是在同一个事件循环 tick 里完成的，浏览器会把这些DOM操作合并，最终用户看不到加载器的显示过程。

下面给你几个可行的解决方案：

方案1：用setTimeout把耗时代码放到下一个事件循环 #

把耗时代码包裹在setTimeout里，让浏览器先完成UI重绘，再执行耗时逻辑：

$(".loader-block").addClass("show");
// 把耗时代码放到下一个事件循环，给浏览器时间渲染加载器
setTimeout(() => {
  // 耗时的JS代码
  ......
  $(".loader-block").removeClass("show");
}, 0);

这里的0毫秒并不是真的立即执行，而是让浏览器在当前事件循环的UI渲染完成后，再执行这个回调函数，这样加载器就能正常显示了。

方案2：用requestAnimationFrame确保渲染完成后再执行耗时代码 #

requestAnimationFrame会在浏览器下一次重绘前执行回调，我们可以嵌套一次，确保加载器的样式已经渲染完成：

$(".loader-block").addClass("show");
requestAnimationFrame(() => {
  // 等待当前帧渲染完成后，再执行耗时代码
  requestAnimationFrame(() => {
    // 耗时的JS代码
    ......
    $(".loader-block").removeClass("show");
  });
});

这个方法比setTimeout更精准，因为它是和浏览器的渲染周期同步的，不会有不必要的延迟。

方案3：使用Web Worker分离耗时代码（推荐用于超耗时逻辑） #

如果你的耗时代码是纯计算型的，不涉及DOM操作，可以把它放到Web Worker里执行，这样不会阻塞主线程的UI渲染：

1. 首先创建一个worker.js文件，把耗时代码放进去：

// worker.js
self.onmessage = function(e) {
  // 耗时的计算代码
  const result = doHeavyTask(e.data);
  self.postMessage(result);
};

function doHeavyTask(data) {
  // 你的耗时逻辑
  ......
  return result;
}

2. 主线程的JS代码修改为：

$(".loader-block").addClass("show");
// 创建Worker
const worker = new Worker('worker.js');
// 给Worker发送数据（如果需要的话）
worker.postMessage(yourData);
// 监听Worker的结果
worker.onmessage = function(e) {
  // 耗时任务完成，隐藏加载器
  $(".loader-block").removeClass("show");
  // 处理返回的结果
  handleResult(e.data);
};
// 监听错误
worker.onerror = function(error) {
  console.error('Worker error:', error);
  $(".loader-block").removeClass("show");
};

这个方法彻底解决了主线程阻塞的问题，是处理超耗时计算的最佳实践。

额外验证小技巧 #

你可以在添加类之后加一个console.log($(".loader-block")[0].offsetHeight)，强制浏览器触发重绘，不过这只是临时调试用的，上面的方案才是长期解决办法。

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