Question

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

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

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

因此，在这个基本页面中，我尝试在chrome v71中运行它，并且首先运行了javascript，但是在firefox中，按预期在页面加载后对其进行了操作。有什么想法吗？

Answer 1

问题是alert 阻止了-在可见alert弹出窗口的同时，阻止了进一步的页面渲染，并且当window.onload运行时，页面可能完全没有渲染，特别是如果之前没有太多HTML。 onload运行时，所有 do 元素都存在于文档中，只是可能不可见。（取决于浏览器）

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加载之前先加载js事件

1 个答案: