Question

在Chrome中，以下代码不会显示<h1>Hello</h1>，直到 显示alert后用户点击“确定”。但是，在Firefox中，预期的序列发生，显示<h1>Hello</h1>，然后出现警报。

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

我很好奇为什么在Chrome中关闭提醒后显示Hello。这是应该发生的吗？ HTML / JavaScript规范是不是很清楚，Chrome只是从不打扰这个直观吗？这是Chrome中的错误吗？

Answer 1

浏览器有一个用于呈现HTML + CSS和JavaScript执行的线程。只要alert是同步调用，它就会阻止此线程。

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

结果我会说这是一个改进，因为在你决定要展示什么之前会跳过渲染;加上它无论如何都不重要 - 通常你在加载页面时不应该使用阻塞线程操作符。

Answer 2

我相信问题是JavaScript和渲染过程共享相同的线程，并且调用alert()不仅会显示弹出窗口，还会暂停主线程，这会阻止渲染继续进行。

要防止出现此问题，您只需在调用alert()之前让渲染发生，您可以通过将其添加到提示符来执行此操作：

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

我还尝试使用load eventListener并推迟<script>标记，但两者都不起作用。

未显示警报前的HTML

2 个答案: