求助：JavaScript中alert执行顺序异常，DOM修改后未立即生效？

先看你提供的这段代码：

<h1 id="title">foo</h1> 
<script> 
setTimeout(function() { 
  document.getElementById('title').innerText = 'bar'; 
  alert("alert"); 
}, 1000); 
</script>

你遇到的现象完全符合浏览器的事件循环和渲染机制，我来给你拆解清楚：

核心原因：alert会阻塞当前宏任务执行与浏览器渲染队列 #

JavaScript确实是单线程的，但浏览器的工作不止执行JS，还要处理DOM渲染、用户交互等，这些任务都在事件循环里按顺序调度：

1. 1秒后，setTimeout的回调函数被加入宏任务队列，等主线程空闲时开始执行这个回调。
2. 回调里先执行document.getElementById('title').innerText = 'bar'：这一步只是修改了DOM元素的属性，浏览器会把这个DOM更新标记为「待渲染」，但不会立刻进行页面重绘——因为浏览器的渲染动作是在当前宏任务执行完成后才会触发的。
3. 紧接着执行alert("alert")：alert是一个模态同步阻塞对话框，它会暂停当前所有JS代码的执行，同时也会阻塞浏览器的渲染进程。在用户点击「OK」之前，这个宏任务（也就是setTimeout的回调）并没有执行完毕，浏览器自然不会去处理之前标记的DOM更新请求。
4. 当你点击「OK」关闭alert后，setTimeout的回调函数终于执行完成，主线程空闲下来，浏览器才会处理之前的DOM更新请求，把页面上的文字改成"bar"。

验证：把alert换成非阻塞操作试试 #

如果把代码里的alert换成console.log("log")，你会发现页面立刻显示"bar"——因为console.log不会阻塞代码执行，回调函数很快执行完毕，浏览器马上就进行了渲染。

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