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

Question

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

Pet*_*tai 7 javascript performance google-analytics

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

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

该YUI最佳实践加快您的网站提示把脚本作为远了尽可能靠近页面,因为脚本可以阻止并行下载:

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

谷歌说:

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

我通常更关心用户体验和页面加载速度,而不是确保每个跟踪信号都被发送,所以这会促使我将Google分析脚本包含在页面底部,而不是在<head>右边？

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

那么,将你的剧本</head>与之前的剧本保持一致的利弊是</body>什么？

Answer 1

Mik*_*rov 7

建议<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);
  })();

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，1 月前
查看次数：	1540 次
最近记录：	11 年，11 月前