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

编辑：虽然这个问题已经被问和之前（1）回答，（2），（3），答案都没有提到包括在<head>文件时使用异步和/或延迟加载的可能性。由于Google Analytics（分析）使用这两种方法的新代码，系统提示我提问。在</head>标签与</body>标签之前包含Javascript的优缺点是什么？

我最近注意到，谷歌Analytics（分析）现在建议包括</head> tag之前它的JavaScript代码段。他们过去建议在</body>标签之前包含摘录。

的YUI Best Practices for Speeding Up Your Web Site建议把脚本作为远了尽可能靠近页面，因为脚本可以阻止并行下载：

造成脚本的问题是，他们阻止并行下载。 HTTP/1.1规范建议浏览器每个主机名并行下载至少两个组件。如果您从多个主机名提供图像，则可以同时发生两个以上的下载。然而，当脚本正在下载时，浏览器将不会启动任何其他下载，即使是在不同的主机名上。

谷歌表示：

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

通常我更关心的是用户体验和页面加载速度比确保每个跟踪信标发出，因此这将推动我向包括指向页面底部的谷歌分析脚本，而不是在<head>，对不对？

我相信还有更多的事情要考虑，而不是这两个观点。影响你的是什么？有什么要考虑的事情？

那么，在之前与</body>之间的权利对比有什么优点和缺点？

来源

2010-07-29 Peter Ajtai

http://stackoverflow.com/questions/2451417/whats-pros-and-cons-putting-javascript-in-head-and-putting-just-before-the-body – 2010-07-29 23:50:45

@Amr - 那回答那个问题不包括脚本的异步或延迟加载。 – 2010-07-29 23:57:28

关于<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); 
    })();

来源

2010-07-29 23:37:29

在<head>把脚本将迫使浏览器，它呈现的页面，并阻止并行下载前，下载文件。如果您将脚本放在</body>标记末尾之前，那么浏览器会在您的内容之后解析这些脚本，这会导致页面加载速度更快。

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

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

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

如果上面的代码放在</body>之前它不会尽快如果它是在头解析。在你准备好的时间方面，你可能会注意到某些情况和不一致之处。

来源

2010-07-29 23:42:58

我的猜测，除了对方是什么人都表示，到目前为止是这样的分析可以更准确地跟踪访问。有时候有人会在整个页面下载之前去一个网站离开。如果他们这样做的话，他们下载跟踪代码的机会越大，越接近页面顶部。这应该有助于那些分析统计数据的人看到跳出率。如果您注意到您的跳出率很高（页面上的时间很短），则可能表明您的页面对于大多数观众而言耗时过长，并且应该提醒您采取措施加快页面加载速度。

来源

2010-07-29 23:46:46 Jason

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

回答

相关问题