JavaScript中alert语句导致jQuery .remove操作延迟如何解决？

浏览器的JavaScript执行、DOM渲染共享同一个主线程，遵循事件循环执行规则：
你调用$(".errorContainer").remove()时，内存中的DOM树已经同步完成了删除操作，但此时主线程仍在执行RemoveErrors的同步代码，还未进入视图重绘阶段。而alert是同步阻塞API，会直接挂起整个主线程，导致视图更新的任务被延后到alert弹窗关闭后才会执行，因此视觉上会产生.remove()方法被延迟执行的错觉。

• 把alert放入异步队列，等当前主线程的视图渲染完成后再触发。最简便的方式是用setTimeout包裹alert，设置延迟为0即可，该操作会把alert推入宏任务队列，等当前同步任务、微任务、视图渲染全部执行完毕后再执行弹窗：

function RemoveErrors() {
  $(".errorContainer").remove();
  setTimeout(() => {
    alert("hold");
  }, 0);
}

• 替换原生alert为自定义模态弹窗，自定义弹窗不会阻塞主线程的渲染流程，DOM删除操作完成后会立刻更新到页面，同时弹窗正常展示，不会出现感知上的延迟。
• 如必须使用原生alert，可通过读取DOM布局属性强制浏览器先完成重绘再执行弹窗，该方案属于hack实现，优先级低于前两种：

function RemoveErrors() {
  $(".errorContainer").remove();
  // 读取布局属性强制触发重排重绘
  void document.body.offsetWidth;
  alert("hold");
}

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