未显示警报之前的 HTML答案

【问题标题】：HTML before an alert is not shown未显示警报之前的 HTML
【发布时间】：2018-09-13 17:09:29
【问题描述】：

在 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 中的错误吗？

【问题讨论】：

很奇怪，刚刚试了一下。我认为这是因为您的脚本在页面完全加载之前正在运行。如果你把 $(document).ready 放在它之后，“你好”首先出现。我第一次遇到这个：D
存在于页面上并作为 DOM 一部分的元素与它们在屏幕上的绘制无关。并且绘画不需要同步。
在这里查看答案：stackoverflow.com/questions/8996852/…
Webpage not loading in chrome while alert is up的可能重复

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我相信问题在于 JavaScript 和渲染进程共享同一个线程，调用 alert() 不仅会显示弹出窗口，还会暂停主线程，从而阻止渲染继续。

为防止出现此问题，您只需在调用 alert() 之前让渲染发生，您可以通过将其添加到 timout 来做到这一点：

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

我也尝试使用 load eventListener 并推迟 <script> 标签，但都没有工作。

【讨论】：