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? [duplicate]HTML5：为什么脚本标签需要放在body标签的末尾而不是body标签的开头？ [复制]
【发布时间】：2014-10-09 15:51:29
【问题描述】：

在编写 HTML 页面时，一些网站建议将脚本写在 BODY 标签的末尾，而不是写在 BODY 标签的开头。我读这会增加页面刷新的性能。但是，当 HTML 页面仅在 DOM 解析完所有标签后才呈现时，这有什么帮助呢？

【问题讨论】：

页面渲染比简单的线性进展要复杂得多。页面末尾的脚本不会“阻止”呈现以前的视觉内容。
when html page is rendered only after DOM parses all the tags 不正确

标签： javascript html

【解决方案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>

如果您要运行此程序，您将不会看到“Apples are great”。在浏览器窗口中，因为 jQuery 选择没有任何选择。如果将脚本移动到</body>标签下面，当调用jQuery选择器方法时，它可以找到已经加载到窗口中的div。

【讨论】：

请记住，在无限可能的用例中，dom 操作只是 js 的一种用途。

【解决方案2】：

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

事实上，浏览器只需要 DOM 结构就可以开始渲染。他们不需要脚本，也不考虑布局目的。在被处决之前，它们只是自重。

对于初始渲染过程（或多或少），甚至可以认为 CSS 是不必要的，但由于 CSS 加载是非阻塞的，所以这不是问题。

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

奖励曲目

当涉及到跟踪脚本（例如 mixpanel、inspeclet 甚至Google Analytics... ……随便。

如果您将跟踪脚本放在底部，它可能无法及时启动以检测到该访问，因此您不会知道您有如此极端的跳出率。在这种情况下，我会考虑将脚本放在首位。

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

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

这将减轻在头部加载所述脚本的缺点。

【讨论】：

你能解释/发布一个链接来解释为什么“CSS加载是非阻塞的”吗？
因为样式表和字体不会影响解析 DOM 的方式，它们只会设置样式。它们可以在加载后应用，就像在渐进式渲染方法中一样。一旦在 DOM 树中找到它们就会被请求，但流程会继续进行，无需等待它们完成。

【解决方案3】：

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

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

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

【讨论】：