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

时间:2018-08-16 11:07:06

标签: javascript html dom

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

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


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

3 个答案:

答案 0 :(得分:0)

  

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

正确,它上面的所有元素都已解析,并在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

答案 1 :(得分:0)

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

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

<html>
 <body>

  <p>hello world!</p>

  <script>
   alert('hey there');
   
   window.onload = function() {
      alert("Page has rendered");
   };
  </script>

 </body>
</html>

答案 2 :(得分:0)

您可以使用

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

相当于jquery document ready的普通js

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