如何避免DOM变更被合并，实现加载器在长时间DOM写入操作前正常展示

问题根源 #

浏览器的JS线程和渲染线程是互斥的，同一段宏任务内的所有DOM更新会被批量合并，等到当前宏任务的JS代码全部执行完成后才会触发重排重绘。你写的同步代码、Promise微任务都在同一个渲染周期前执行完成，浏览器还没来得及把加载器绘制到页面上，就已经执行了hideLoader操作，所以看不到加载状态。

解决方案 #

方案1：使用setTimeout延迟耗时任务（兼容性最好） #

将耗时操作放到下一个宏任务执行，留给浏览器足够的时间渲染加载器：

function onclick() {
    showLoader();
    
    setTimeout(() => {
      longDOMWriteCall();
      hideLoader();
    }, 0);
}

方案2：配合requestAnimationFrame保证渲染时机（更稳定） #

如果方案1在部分低端设备上仍然无效，可以额外等待一次渲染帧，确保加载器已经完成绘制再执行耗时任务：

function onclick() {
    showLoader();
    
    // 等待下一帧渲染触发
    requestAnimationFrame(() => {
      // 再放入宏任务队列，确保渲染完成
      setTimeout(() => {
        longDOMWriteCall();
        hideLoader();
      }, 0);
    });
}

以上两个方案都不需要改动原有业务逻辑，对于最长半秒的耗时场景完全适配，低端设备上也能正常展示加载状态。

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