Question

修改：此问题已在（1），（2），（3）之前被询问和回答，但答案未提及在<head>中包含文件时使用异步和/或延迟加载的可能性。由于谷歌分析新代码使用了这两种方法，我被提示提出问题。

我最近注意到Google分析现在建议在</head>标记之前加入其Javascript代码段。他们过去建议在</body>代码之前添加代码段。

YUI Best Practices for Speeding Up Your Web Site建议尽可能将脚本放在页面下方，因为脚本可以阻止并行下载：

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

谷歌说：

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

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

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

那么，<head>与</head>之前的脚本正确对比有什么优缺点？

Answer 1

关于<head>的建议是不要 LINK TO EXTERNAL 需要下载的脚本。这阻止了并行下载。 Google的最新跟踪代码使用lazy loading，并不会阻止并行下载。

(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准备时间方面会出现某些情况和不一致。

相关问题：Where should I declare JavaScript files used in my page? In <head></head> or near </body>?

在标记与标记之前包含Javascript的优缺点是什么？

3 个答案: