V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
miao
V2EX  ›  JavaScript

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

  •  
  •   miao · 2012-04-23 13:05:44 +08:00 · 4331 次点击
    这是一个创建于 4582 天前的主题,其中的信息可能已经有所发展或是发生改变。
    Google Analytics官方帮助提示, Google Analytics分析代码应置于</head>
    而我发现有很多网站都只是放置于网页的最底部,即</body>之前
    请问这样的好处与坏处是什么?
    v2ex.com也把分析代码放置于</body>之前
    10 条回复    1970-01-01 08:00:00 +08:00
    GordianZ
        1
    GordianZ  
    MOD
       2012-04-23 13:10:10 +08:00
    如果 JS 载入缓慢的话,放在 HEAD 里面影响正文加载速度。放在 BODY 结尾的话正文载入完成才开始载入 JS.
    luser
        2
    luser  
       2012-04-23 13:11:25 +08:00   ❤️ 1
    </head>前准确
    </body>前不影响加载页面速度
    gonghao
        3
    gonghao  
       2012-04-23 13:16:06 +08:00   ❤️ 4
    @GordianZ 其实不全是这样的,ga 代码采用了 script 插入方式载入核心代码,head 里面放的也只是一些简单的全局变量设置,然后引导加载核心代码,所以理论上是非阻式加载。但是在天朝,毕竟网速慢,尤其是国外,再是无阻的加载,浏览器还是回去 loading 势必还是会影响整体页面速度~
    GordianZ
        4
    GordianZ  
    MOD
       2012-04-23 13:16:21 +08:00
    @luser 不影响么?
    浏览器在 HEAD 解析到 JS 的引用,发送 HTTP 请求,理应影响到 BODY 的渲染啊。
    GordianZ
        5
    GordianZ  
    MOD
       2012-04-23 13:16:54 +08:00
    @gonghao 原来如此,谢谢解释。
    yyfearth
        6
    yyfearth  
       2012-04-23 13:35:53 +08:00
    @GordianZ @gonghao 用async和defer应该可以解决阻塞的问题,只是不是所有浏览器都支持。
    在天朝讨厌的是有时完全无法服务,如果不放到最后面会死掉的,就算放到最后面也会导致很长的载入时间。
    gonghao
        7
    gonghao  
       2012-04-23 14:33:23 +08:00   ❤️ 1
    @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
        8
    miao  
    OP
       2012-04-23 14:56:06 +08:00
    @yyfearth 总结经验, 就是面对国内的网站,放于页面底部. 面对国外的网站,放在哪里都可以
    yyfearth
        9
    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
        10
    aligo  
       2012-04-23 17:49:57 +08:00
    @gonghao 对的。另外我有洁癖甚至不喜欢把google提供的内联script放到html中去,而是一起和其他代码放到静态js文件中去,让客户端缓存
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2832 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 02:15 · PVG 10:15 · LAX 18:15 · JFK 21:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.