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，然后再将其作为一个整体呈现。

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

Answer 2

我认为问题是 JavaScript 和渲染进程共享同一个线程，调用 alert() 不仅会显示弹出窗口，还会暂停主线程，这会阻止渲染继续。

为防止出现此问题，您只需在调用 alert() 之前让渲染发生，您可以通过将其添加到超时来实现此目的：

<h1>Hello</h1>
<script>
  setTimeout(()=>alert('Hello is displayed before this alert'),1);
</script>

我也尝试使用 load eventListener 并延迟 <script> 标签，但两者都没有用。

HTML before an alert is not shown