javascript - 未显示警报之前的 HTML

Question

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

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

我很好奇为什么Hello在 Chrome 中关闭警报后显示。这是应该发生的事情吗？是不是 HTML/JavaScript 规范不清楚，而 Chrome 只是从不费心让它变得直观？这是 Chrome 中的错误吗？

Answer 1

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

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

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