在 javascript 中，`alert()` 会阻塞主线程并暂停渲染，导致 dom 更新（如棋子移动）无法及时呈现；需借助 `requestanimationframe()` 在下一帧渲染前触发 alert，确保视觉更新完成。
在开发棋类网页（如国际象棋）时，一个常见问题是：当玩家走完决定性一步后，你通过修改 DOM（例如更新 的 src 或切换 CSS 类）来反映棋盘状态变化，紧接着调用 alert(‘Black wins!’) 提示胜负——但用户看到的却是“空白”或“旧状态”的棋盘，直到关闭 alert 后才突然刷新出最新局面。
这是因为浏览器的渲染是异步且批量进行的：JavaScript 执行期间，DOM 变更会被暂存，只有当 JS 调用栈清空、控制权交还给浏览器后，才会触发样式计算、布局、绘制和合成（即一帧渲染）。而 alert() 是同步阻塞式 API，它会在 DOM 更新实际绘制到屏幕前就立即挂起整个线程，导致“更新未上屏，提示已弹出”。
✅ 正确解法：利用 requestAnimationFrame() 将 alert 推迟到下一帧绘制之前执行。该函数保证回调在浏览器下一次重绘前被调用，此时所有待处理的 DOM 变更已被应用并准备就绪：
// 在完成棋盘 DOM 更新后（例如：boardElement.innerHTML = newBoardHTML）
// 不要直接写 alert(...)，而是：
requestAnimationFrame(() => {
alert('Checkmate! White wins.');
});
? 进阶技巧：若需更精确控制（例如等待 2 帧或封装复用），可使用如下工具函数：
function waitFrames(n, callback) {
if (n <= 0) {
requestAnimationFrame(callback);
} else {
requestAnimationFrame(() => waitFrames(n - 1, callback));
}
}
// 等待 1 帧（推荐用于 alert 场景）
waitFrames(1, () => alert('Game over!'));
⚠️ 注意事项：
- 避免在 setTimeout(…, 0) 中调用 alert——它仅将任务推入宏任务队列，无法保证渲染已发生；
- requestAnimationFrame 是当前最可靠、零依赖的原生方案，兼容所有现代浏览器（包括 Safari ≥ 6.1）；
- 若项目已使用框架（如 React/Vue），优先通过 useEffect / nextTick 等机制确保 DOM 已提交，再调用 requestAnimationFrame；
- 生产环境建议用非阻塞 UI（如模态框组件）替代 alert，以提供更好用户体验与可访问性。
总之，requestAnimationFrame(() => alert(…)) 是解决“DOM 更新后 alert 不显示最新画面”问题的简洁、标准且高性能的方案。