为何JS中先写的document.body.style.backgroundColor后于alert生效

这个现象是浏览器内核的线程调度逻辑和事件循环机制共同导致的：

• 浏览器内核包含两个互斥的核心线程：JS引擎线程 和 GUI渲染线程，两者同一时间只能有一个处于运行状态，另一个会被挂起，避免渲染结果和JS操作出现冲突。
• 按照浏览器事件循环的执行规则，每一轮事件循环的执行顺序为：执行当前宏任务的所有同步代码 → 清空本轮产生的所有微任务 → 调用GUI渲染线程更新页面视图。
• 你给出的两行代码都属于点击事件回调这个宏任务里的同步代码，执行流程如下：
  1. 执行document.body.style.backgroundColor = "Green"时，仅会把背景色修改的指令加入待渲染队列，不会立刻触发页面重绘——此时JS线程仍在运行，GUI渲染线程处于被阻塞状态，且还没走到本轮事件循环的渲染步骤。
  2. 接下来执行alert("Done")，这个API是同步阻塞的，会一直暂停JS线程的执行直到用户点击确认按钮，此时JS线程始终没有释放控制权，本轮事件循环的渲染步骤一直无法执行，所以背景色更新不会生效。
• 直到用户关闭alert弹窗，当前宏任务的所有同步代码执行完毕，走完微任务清空流程后，GUI渲染线程才会被唤醒，处理渲染队列里的背景色更新指令，此时你才会看到页面背景变为绿色。

效果调整方案 #

如果需要先更新背景色再弹出alert，可以把alert的执行时机推迟到本轮渲染完成之后，比如放到下一个宏任务队列：

document.body.style.backgroundColor = "Green";
// setTimeout 0 会把回调放到下一轮宏任务，等待本轮渲染完成后执行
setTimeout(() => {
  alert("Done");
}, 0);

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