Google Analytics谷歌分析代码应置于</head>之前或</body>之前与其利弊

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 4919 天前的主题，其中的信息可能已经有所发展或是发生改变。

Google Analytics官方帮助提示, Google Analytics分析代码应置于</head>
而我发现有很多网站都只是放置于网页的最底部,即</body>之前
请问这样的好处与坏处是什么?
v2ex.com也把分析代码放置于</body>之前

body

Google

analytics

10 条回复 1970-01-01 08:00:00 +08:00

GordianZ

2012-04-23 13:10:10 +08:00

如果 JS 载入缓慢的话，放在 HEAD 里面影响正文加载速度。放在 BODY 结尾的话正文载入完成才开始载入 JS.

luser

2012-04-23 13:11:25 +08:00

</head>前准确
</body>前不影响加载页面速度

gonghao

2012-04-23 13:16:06 +08:00

@GordianZ 其实不全是这样的，ga 代码采用了 script 插入方式载入核心代码，head 里面放的也只是一些简单的全局变量设置，然后引导加载核心代码，所以理论上是非阻式加载。但是在天朝，毕竟网速慢，尤其是国外，再是无阻的加载，浏览器还是回去 loading 势必还是会影响整体页面速度～

GordianZ

2012-04-23 13:16:21 +08:00

@luser 不影响么？
浏览器在 HEAD 解析到 JS 的引用，发送 HTTP 请求，理应影响到 BODY 的渲染啊。

GordianZ

2012-04-23 13:16:54 +08:00

@gonghao 原来如此，谢谢解释。

div id="r_286755" class="cell">

yyfearth

2012-04-23 13:35:53 +08:00

@GordianZ @gonghao 用async和defer应该可以解决阻塞的问题，只是不是所有浏览器都支持。
在天朝讨厌的是有时完全无法服务，如果不放到最后面会死掉的，就算放到最后面也会导致很长的载入时间。

gonghao

2012-04-23 14:33:23 +08:00

@yyfearth 其实 async 标签的本质就是与动态创建一个 script node 是一致的，可以参看这个文章： http://www.nczonline.net/blog/2010/08/10/what-is-a-non-blocking-script/

推荐动态创建 script node + 设置 async 属性，这样理论上不管在哪个位置都应该是最佳的无阻方式。现在的高级浏览器都会把 download 和 parse & execute 分开，先 download 而不会影响 UI 线程，当然有资源 download 的时候，浏览器还是会是 loading 状态，所以当然还是会影响整体速度～

miao

2012-04-23 14:56:06 +08:00

@yyfearth 总结经验, 就是面对国内的网站,放于页面底部. 面对国外的网站,放在哪里都可以

yyfearth

2012-04-23 15:36:51 +08:00

@GordianZ @miao @gonghao 如果没有async或defer，就是script是空的也必须下载回来执行才能继续解析html，因此就算是script loader也还是阻塞了。
因为考虑到可能会有document.write，dom重写，script必须执行完才继续解析，然而就是js再少，不阻塞也得等下载完执行才知道，因此实际上还是阻塞了，除非用async或defer。
在国内这个问题就很严重了，网速慢，有时被wall，浏览器老，决定就算用async和loader都还是放到最后保险。

aligo

2012-04-23 17:49:57 +08:00

@gonghao 对的。另外我有洁癖甚至不喜欢把google提供的内联script放到html中去，而是一起和其他代码放到静态js文件中去，让客户端缓存