在之前包含Javascript的优缺点是什么？ </head> 标签与 </body> 标签？

Question

编辑：虽然在（ 1 ），（ 2 ），（ 3 ）之前已经提出并回答了这个问题，但答案没有提到在<head>包含文件时使用异步和/或延迟加载的可能性。 由于谷歌分析使用这两种方法的新代码，我被提示提出问题。

我最近注意到Google分析现在建议在</head>标记之前包含其Javascript代码段。 他们曾建议在</body>标记之前包含代码段。

YUI加速网站的最佳实践建议尽可能将脚本放在页面尽可能远的地方，因为脚本可以阻止并行下载：

脚本引起的问题是它们阻止了并行下载。 HTTP / 1.1规范建议浏览器每个主机名并行下载不超过两个组件。 如果您从多个主机名提供图像，则可以并行执行两次以上的下载。 但是，在下载脚本时，即使在不同的主机名上，浏览器也不会启动任何其他下载。

谷歌说：

异步代码段的一个主要优点是您可以将它放在HTML文档的顶部。 这增加了在用户离开页面之前发送跟踪信标的可能性。 习惯上将JavaScript代码放在<head>部分，我们建议将代码段放在<head>部分的底部以获得最佳性能。

我通常更关心用户体验和页面加载速度，而不是确保发送每个跟踪信标，因此这将促使我将Google分析脚本包含在页面底部，而不是<head> ，对？

我敢肯定，除了这两个观点之外，还有更多的事情需要考虑。 影响你的是什么？ 有什么需要考虑的事情？

那么，将你的脚本放在</head>与</body>之前的正确和缺点是什么？

Answer 1

关于<head>的建议是不要链接到需要下载的EXTERNAL脚本。 这阻止了并行下载。 谷歌最新的跟踪代码使用延迟加载，不会阻止并行下载。

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

Answer 2

我的猜测，除了其他人到目前为止所说的内容之外，分析可以更准确地跟踪访问。 有时某人会在整个页面下载之前访问某个站点并离开。 如果他们这样做，他们下载跟踪代码的可能性就更大，如果它更接近页面顶部。 这应该有助于分析统计数据的人看到跳出率。 如果您发现跳出率很高（页面上的时间很短），则可能表明您的网页对大多数受众群体来说花费的时间太长，并且应该提醒您做一些事情来加快页面加载速度。

Answer 3

将脚本放在<head>会强制浏览器在呈现页面之前下载文件并阻止并行下载。 如果您将脚本放在结束</body>标记之前，浏览器将在您的内容之后解析这些脚本，这将导致更快的页面加载。

通过使用async=true的自执行匿名函数，您不会阻止并行下载。

对于具有模态的非常复杂的应用程序，如果在启用JS时需要隐藏模态，则可以在</body>之前放置脚本。

<head>
<script>document.documentElement.className+='js';</script>
<style>html.js #modal { display:none; }</style>
</head>

如果上面的片段放在</body>之前，它将不会被解析，如果它在头部。 在您可能会注意到的dom准备时间方面会出现某些情况和不一致。

相关问题：我应该在哪里声明我的页面中使用的JavaScript文件？ 在<head> </ head>或</ body>附近？

在之前包含Javascript的优缺点是什么？ </head> 标签与 </body> 标签？

问题描述

3 个解决方案

解决方案1
7 已采纳 2010-07-29 23:37:29

解决方案2
3 2010-07-29 23:46:46

解决方案3
2 2010-07-29 23:42:58

在之前包含Javascript的优缺点是什么？ </head> 标签与 </body> 标签？

问题描述

3 个解决方案

解决方案1 7 已采纳 2010-07-29 23:37:29

解决方案2 3 2010-07-29 23:46:46

解决方案3 2 2010-07-29 23:42:58

解决方案1
7 已采纳 2010-07-29 23:37:29

解决方案2
3 2010-07-29 23:46:46

解决方案3
2 2010-07-29 23:42:58