Chrome 在 DOM 加载之前加载 js 事件答案

【问题标题】：Chrome loads js events before DOM loadsChrome 在 DOM 加载之前加载 js 事件
【发布时间】：2019-06-19 22:12:45
【问题描述】：

我在 chrome v71.0.3578.98 上使用 window.onload 进行了一些 javascript 测试，我正在经历 DOM 加载之前发生的 js

这是刚刚包装在一个简单的 html 标记中的代码。

<h1>Title...</h1>
<p>lorem500...</p>
<script>
  function pageLoad() {
    alert('I\'m alive');
  }
  window.onload = pageLoad;
</script>

所以在这个基本页面中，我尝试在 chrome v71 中运行它，并且首先运行 javascript，但是在 Firefox 中，Opera 它在页面加载后加载，正如预期的那样。有什么想法吗？

【问题讨论】：

标签： javascript google-chrome dom

【解决方案1】：

问题在于alert 阻塞 - 虽然alert 弹出窗口可见，但阻止了进一步的页面呈现，当window.onload 运行时，页面很可能根本没有呈现然而，尤其是在它之前根本没有太多 HTML 的情况下。当onload 运行时，所有元素确实存在于文档中，只是它们可能不可见。（取决于浏览器）

alert 对用户非常不友好，并且难以使用（正如您所遇到的那样）。请改用console.log 或适当的模式：

<h1>Title...</h1>
<p>lorem500...</p>
<script>
  function pageLoad() {
    console.log('I\'m alive');
  }
  window.onload = pageLoad;
</script>

如果您不得不使用alert，只在setTimeout 瞬间发出警报，这样浏览器就有机会在alert 被调用之前绘制页面，以防万一浏览器尚未呈现页面：

<h1>Title...</h1>
<p>lorem500...</p>
<script>
  function pageLoad() {
    setTimeout(() => {
      alert('I\'m alive');
    });
  }
  window.onload = pageLoad;
</script>

【讨论】：

是的，我运行了一个控制台，它可以工作，但是我只是不确定 chrome 的响应与事件允许的不同，其他浏览器的加载也不同。那么它是哪一个？带有警报的功能在DOM之前还是什么？
这取决于浏览器。有些浏览器会在阻塞 alert onload 之前绘制，有些则不会。 Chrome 是在alert 之前不绘制的之一。
谢谢，我认为是 chrome 导致了这种行为，所以当我允许警报或想办法在 DOM 绘制后发生这种情况时，我必须牢记这一点。
当一个答案解决了您的问题时，您可以考虑将其标记为已接受（选中左侧的复选框）以表明问题已解决:)