HTML5:为什么脚本标签需要放在body标签的末尾，而不是body标签的开始

HTML5: Why does a script tag need to be placed at the end of body tag instead of at the beginning of the body tag?

本文关键字：标签 body 开始 为什么 脚本 HTML5      更新时间：2023-09-26

在编写HTML页面时，一些站点建议将脚本写在BODY标签的末尾，而不是BODY标签的开始。我读到这将提高页面刷新的性能。但是，当只有在DOM解析了所有标记之后才呈现HTML页面时，这有什么帮助呢?

将依赖项(如jQuery)放在head标签中是惯例。但是，如果不将DOM加载到窗口中，脚本就无法访问它。

请看下面的例子:

<!DOCTYPE html>
<head>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js
   </script>
</head>
<script type="text/javascript">
   $('#appleTest').html("Apples are great.");
</script>
<body>
   <div id="appleTest">
   </div>
</body>

如果你运行这个，你不会看到"苹果很棒"。'，因为jQuery选择没有任何东西可选择。如果您将脚本移动到</body>标记的下方，当调用jQuery选择器方法时，它可以找到div，因为它已经加载到窗口中。

JavaScript加载不是DOM的一部分，但它会阻塞，并且会中断加载过程，直到加载完成。即使它是一个小脚本，它仍然是一个额外的请求，并且会减慢整个过程。

事实是浏览器只需要DOM结构就可以开始呈现。它们不需要脚本，也不考虑布局目的。在执行之前，它们只是一个累赘。

甚至CSS在初始呈现过程中也可能被认为是不必要的(或多或少)，但由于CSS加载是非阻塞的，这不是问题。

将脚本放在底部所获得的性能增益可能会有所不同，即使这是一种推荐的做法，它也可能并不总是无害的。例如，在处理cms时，您可能会将主题设计为在底部加载脚本，但无法控制插件。例如，这种情况在WordPress中经常发生，人们最终将脚本放在头部以避免与插件冲突。

附送的歌曲

当涉及到跟踪脚本，如mixpanel, inspectlet，甚至谷歌分析…您可能希望检测用户何时进入您的页面并在几秒钟后离开，因为加载时间缓慢，成人广告块……无论什么。

如果你把跟踪脚本和底部，它可能无法及时启动检测访问，所以你不会知道你有这样一个极端的跳出率。在这种情况下，我会考虑将脚本放在头部。

如果你把资源提示放在开头，写

<link rel="preconnect" href="https://api.mixpanel.com" />
<link rel="preconnect" href="https://cdn.mxpnl.com/" />

或

<link rel="prefetch" href="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" as="script">

它将减轻在头部加载上述脚本的缺点

这很有帮助，因为HTML页面不是在DOM准备好之后才呈现的:浏览器在解析DOM时开始呈现页面。

这意味着您可以通过让浏览器最后加载脚本来实现更快的页面"加载"(即使DOM还没有准备好)。用户可以看到你的页面，甚至与它交互，在最后的脚本被加载。

当然，如果您的页面都是用脚本构建的，那么用户就不会看到太多内容。

相关文章：