window.onload阻塞DOM渲染，setTimeout无此问题的原理及DOM渲染后执行JS的方法咨询

这是个特别典型的浏览器事件循环问题，我来一步步给你拆解清楚：

首先搞懂window.onload的触发时机和渲染逻辑 #

你可能以为window.onload是DOM渲染完成后才执行，但实际上它的触发条件是页面所有资源（包括图片、样式表、脚本等）全部加载完成。不过这里的关键不是资源加载，而是浏览器的单线程执行机制：

浏览器的JS执行和页面渲染是互斥的——同一时间只能做一件事。当window.onload的回调开始执行时，浏览器会优先把JS线程占满，所有渲染任务都会被暂时挂起，直到当前的JS同步代码完全执行完毕，才会去处理渲染队列。

所以你直接在window.onload里调用b()时，那个百万次的循环会霸占JS线程很久，浏览器根本没时间去渲染之前的<div id="root">foo</div>，只能等循环结束后，才会一次性完成渲染和DOM更新。

为什么setTimeout(..., 0)就能先渲染再执行？ #

哪怕把setTimeout的延迟设为0毫秒，它也不会立刻执行回调——它的作用是把回调函数放到下一个宏任务队列里。

事件循环的执行顺序是这样的：

1. 执行当前宏任务（这里就是window.onload的回调函数）
2. 处理所有微任务
3. 执行页面渲染（这时候之前的DOM就会被渲染出来）
4. 取出下一个宏任务执行（也就是setTimeout里的b()）

所以当你用setTimeout包裹b()时，当前的onload回调很快就执行完了（只是把任务丢到队列里），浏览器立刻去做渲染，等渲染完成后才会去跑那个大循环，你自然就能先看到foo，再看到循环结束后的数字。

真正让JS在DOM渲染完成后执行的方法 #

如果你想确保代码在DOM渲染完成后再运行，有几个靠谱的方案：

1. 优先用DOMContentLoaded替代window.onload #

DOMContentLoaded会在**DOM树构建完成（不需要等图片、样式表加载）**时触发，比window.onload早得多。配合setTimeout就能确保渲染完成后执行：

<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"> foo </div>
<script>
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    b();
  }, 0);
});

function b() {
  let i = 0
  while (i < 400000000) { i++ }
  document.getElementById('root').innerHTML = i
}
</script>
</body>
</html>

2. 把脚本放在body末尾 #

这是前端开发中最常用的方式：当浏览器解析到body末尾的script标签时，前面的DOM已经完全解析完成。再配合setTimeout，就能实现先渲染再执行JS：

<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"> foo </div>
<script>
// 此时DOM已经解析完成，setTimeout确保渲染后执行
setTimeout(() => {
  b();
}, 0);

function b() {
  let i = 0
  while (i < 400000000) { i++ }
  document.getElementById('root').innerHTML = i
}
</script>
</body>
</html>

3. 用requestAnimationFrame嵌套setTimeout（更精准） #

如果想更精准地等到下一次重绘完成后执行，可以用requestAnimationFrame（它会在浏览器重绘前执行）嵌套setTimeout：

document.addEventListener('DOMContentLoaded', () => {
  requestAnimationFrame(() => {
    setTimeout(() => {
      b();
    }, 0);
  });
});

这个组合能确保代码在一次完整的渲染周期完成后再执行，适合对时机要求极高的场景。

总结一下核心逻辑 #

• JS是单线程的，同步代码会阻塞渲染
• window.onload的回调属于宏任务，同步执行时会霸占线程，导致渲染延迟
• setTimeout会把任务放到下一个宏任务队列，让浏览器先完成当前渲染再执行
• 要确保渲染完成后执行JS，核心就是利用事件循环的优先级，让代码在渲染之后的宏任务里运行

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