不显示警报之前的 HTML

在Chrome中，以下代码不显示<h1>Hello</h1> until after the alert显示并且用户单击“确定”。然而，在 Firefox 中，预期的顺序发生了，<h1>Hello</h1>显示 ，然后出现警报。

<h1>Hello</h1>
<script>
  alert('Hello is displayed after this alert')
</script>

我很好奇为什么Hello在 Chrome 中关闭警报后显示。这是应该发生的事情吗？难道 HTML/JavaScript 规范根本不明确，而 Chrome 从来没有费心让它变得直观吗？这是 Chrome 中的一个错误吗？

浏览器有一个用于渲染 HTML + CSS 和 JavaScript 执行的线程。只要alert是同步调用，它会阻塞该线程。

看起来 Firefox 将警报调用解释为在初始渲染后发生（实际上它不执行此脚本，而是将其推送到事件循环），而 Chrome 在渲染过程中执行 JavaScript。如果您使用，这可能是有意义的document.write在你的脚本中，在将其作为一个整体渲染之前，这有点顺利地将新项目添加到 DOM 中。

因此，我会说这是一个改进，因为渲染会被跳过，直到您决定显示什么；而且它并不重要——通常在加载页面时您不应该使用阻塞线程运算符。