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

[miao]

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

[GordianZ]

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

[luser]

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

[gonghao]

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

[GordianZ]

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

[GordianZ]

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

[yyfearth]

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

[gonghao]

@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]

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

[yyfearth]

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

[aligo]

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