为什么放在body末尾的script会阻塞页面加载？alert未点击页面无法渲染

核心原因 #

你遇到的现象是浏览器渲染线程和JS引擎线程互斥、alert()同步阻塞主线程的正常表现：

• 浏览器解析完body内部所有DOM节点后，需要先完成布局计算、内容绘制两个步骤才能把页面内容展示到屏幕上，这个绘制操作需要等到当前主线程的所有同步JS代码执行完毕后才会执行
• alert()是同步阻塞API，执行时会完全卡住JS主线程，导致浏览器没有机会执行绘制操作，所以你只会看到空白页面，直到点击确认后alert()执行结束，主线程释放，浏览器才会把已解析好的页面内容绘制出来
• 放在head中的alert()表现不同的原因是：执行alert()时body内容还没有开始解析，DOM树都没有构建完成，自然不存在已准备好待绘制的页面内容

解决方法 #

如果需要页面先渲染完成再弹出提示，只需要把alert()放到异步任务队列中，等主线程的绘制操作执行完成后再触发即可，最简便的写法是用0延迟的setTimeout包裹：

<script>
  setTimeout(function() {
    alert("Yo Ninja, welcome to my website!");
  }, 0)
</script>

setTimeout的回调会被放入宏任务队列，浏览器会先完成当前所有同步任务（包括页面绘制），再执行队列中的回调，就可以实现页面先加载完成再弹窗的效果。

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