Question

我正在观看一个教程，其中导师建议，为了改善用户体验，最好在之前添加

我用safari / chrome / opera尝试了一下，得到了相同的结果。我知道我可以使用jQuery解决此问题，但有人可以解释此行为吗？

感谢@ T.J.Crowder，我标记了正确的答案，以防万一有人对引擎盖下发生的事情感到好奇，我在这里找到了很好的解释：脚本在/ body之前，但在页面加载之前运行

Answer 1

...因此脚本将在页面内容完全加载后运行。

正确，它上面的所有元素都已解析，并在DOM中进行了解析。但是，浏览器可能有或没有机会渲染。通过在您的代码中稍加延迟，使其有机会这样做。

    <script>
    setTimeout(function() {
        alert('hey there');
    }, 50);
    </script>
</body>

实时示例：

<p>hello world!</p>
<script>
setTimeout(function() {
    alert('hey there');
}, 50);
</script>

这增加了50毫秒的延迟-人类不会注意到这一点。但是，如果您想要绝对的最小延迟：

    <script>
    requestAnimationFrame(function() {
        setTimeout(function() {
            alert('hey there');
        }, 0);
    });
    </script>
</body>

实时示例：

<p>hello world!</p>
<script>
requestAnimationFrame(function() {
    setTimeout(function() {
        alert('hey there');
    }, 0);
});
</script>

更多：

但是，这些不会等所有图像都加载。如果您想等待一切（可能要花很长时间），请使用window load event，请参阅该链接或示例this answer。

Answer 2

将脚本标记放在body标记的底部时，仅表示在脚本运行之前已处理了DOM的其余部分。它不能保证页面已完全呈现。

您可以使用load事件来确保页面已呈现：

<html>
 <body>

  <p>hello world!</p>

  <script>
   alert('hey there');
   
   window.onload = function() {
      alert("Page has rendered");
   };
  </script>

 </body>
</html>

Answer 3

您可以使用

document.addEventListener("DOMContentLoaded", function() {
  alert('hey there');
});

相当于jquery document ready的普通js

编辑：Nisarg Shah的回答与window onload的主要区别在于，它不会等到站点完全加载（外部样式，图像等）

将<script>标签放在</body>之前无法正常工作

3 个答案: