在 </body> 之前放置 <script> 标签不能按预期工作

Question

我正在看一个教程，其中导师建议为了改善用户体验最好在 </body> 之前添加 <script> 标签，以便脚本在页面内容完全加载后运行。

我尝试了这段代码，我希望看到“hello world！”在任何脚本运行之前，但我的浏览器在其他所有内容出现之前运行 javascript（仅显示带有警报框的空白页面）

<html>
 <body>

  <p>hello world!</p>

  <script>
   alert('hey there');
  </script>

 </body>
</html>

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

---

感谢@T.J.Crowder，我标记了正确答案，以防万一有人对幕后发生的事情感到好奇，我在这里找到了一个很好的解释： Script is before /body but it runs before page is loaded

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>

更多：

• requestAnimationFrame
• setTimeout

不过，那些不会等待所有图像等加载。如果您想等待一切（可能需要很长时间），请使用window load event，查看该链接或this answer 以获取示例。

Answer 2

当一个 script 标签放在 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 回答中的窗口加载的主要区别在于，这不会等到网站完全加载（外部样式、图像等）