Question

在编写html时，有些网站建议在BODY标记的末尾编写脚本，而不是在BODY标记的开头写，我读了这会增加页面刷新的性能，但是如何帮助html只有在DOM解析所有标签后才会呈现页面？

Answer 1

在head标记中包含依赖项（例如jQuery）的约定。但是，如果不将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>

如果你要这样做，你就不会看到苹果很棒。＆＃39;在浏览器窗口中，因为jQuery选择没有任何选择。如果将脚本移动到</body>标记下面，则在调用jQuery选择器方法时，它可以找到div，因为它已加载到窗口中。

Answer 2

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">

它可以减轻在头部加载所述脚本的缺点。

Answer 3

这有帮助，因为HTML页面仅在DOM准备好后才会呈现：浏览器在解析DOM时开始呈现页面。

这意味着您可以通过使浏览器最后加载脚本来实现页面的更快“加载”（即使DOM没有准备好）。在加载完最终脚本之前，用户可以看到您的页面，甚至可以与之交互。

当然，如果您的网页都是使用脚本构建的，那么用户就无法看到。

HTML5：为什么脚本标记需要放在body标记的末尾而不是body标记的开头？

3 个答案: