在浏览器运行JavaScript代码的过程中，渲染引擎和JS引擎是交替工作的，当JS执行耗时操作或者触发阻塞式API时，渲染流程会被暂停。alert是浏览器提供的阻塞式弹窗，调用后会立刻暂停JS执行并阻塞主线程，导致之前修改DOM的操作还没来得及渲染就被中断，最终用户只能先看到弹窗，关闭后才能看到页面变化。要解决这个问题，需要让浏览器先完成渲染再触发alert。
问题产生的核心原因
浏览器的渲染流程分为多个步骤：解析HTML构建DOM树、计算样式、生成布局树、绘制、合成。这些步骤通常不会和JS执行同步进行，而是会在JS执行间隙、或者JS执行完成后的空闲时间触发。而alert()方法的特性是会阻塞当前JS执行上下文，同时暂停渲染进程，直到用户点击确定关闭弹窗，主线程才会继续执行后续代码。如果在修改DOM之后立刻调用alert()，DOM的变化还没进入渲染队列，就会被弹窗阻塞，导致渲染延迟。
解决方法汇总
1. 使用定时器延迟alert执行
定时器会将回调函数放入任务队列，等待当前JS执行栈清空后再执行，而当前JS执行完成后浏览器会先进行渲染，再执行定时器回调，因此可以实现先渲染再弹窗的效果。
// 修改DOM内容
document.getElementById('content').innerText = '内容已更新';
// 用setTimeout延迟alert，让渲染先完成
setTimeout(() => {
alert('内容更新完成');
}, 0);
2. 强制触发同步布局
读取某些会触发重排的属性时，浏览器会强制先执行之前的DOM修改和布局计算，再返回属性值，这个过程会同步完成渲染相关的布局步骤，之后调用alert就能看到渲染后的效果。
// 修改DOM
document.getElementById('box').style.width = '200px';
// 读取offsetWidth触发同步布局，强制浏览器完成之前的渲染计算
const width = document.getElementById('box').offsetWidth;
// 此时布局已经完成，再调用alert
alert('盒子宽度已修改为' + width + 'px');
常见的会触发同步布局的属性包括：offsetTop、offsetLeft、offsetWidth、offsetHeight、clientTop、clientLeft、clientWidth、clientHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight等。
3. 使用requestAnimationFrame
requestAnimationFrame的回调会在浏览器下一次重绘之前执行，我们可以把alert放在下一次重绘之后的定时器里，保证重绘完成后再弹窗。
// 修改DOM
document.querySelector('.tip').classList.add('show');
// 在requestAnimationFrame回调中再延迟alert
requestAnimationFrame(() => {
setTimeout(() => {
alert('提示已显示');
}, 0);
});
方法对比
三种方法的适用场景和特点如下：
| 方法 | 实现原理 | 优点 | 缺点 |
|---|---|---|---|
| 定时器延迟 | 利用事件循环机制，让渲染先执行 | 实现简单，兼容性好 | 延迟时间不精确，依赖事件循环顺序 |
| 强制同步布局 | 读取重排属性触发浏览器同步计算布局 | 执行时机精确，不需要额外延迟 | 会触发重排，频繁使用可能影响性能 |
| requestAnimationFrame | 在重绘前插入回调，再延迟弹窗 | 符合浏览器渲染节奏，性能友好 | 旧版本浏览器兼容性稍差 |
注意事项
实际开发中建议尽量避免使用alert这种阻塞式弹窗，会影响用户体验。如果必须使用，优先选择定时器延迟的方式，简单且兼容性覆盖绝大多数场景。如果修改DOM后需要立刻获取布局信息，使用强制同步布局的方式更合适。另外，不要频繁使用触发重排的属性来强制渲染，避免造成不必要的性能损耗。
JavaScript浏览器渲染页面重绘alert强制刷新修改时间：2026-06-22 13:30:57