该如何加载google-analytics(或其他第三方)的JS (转自http://www.cnblogs.com/BearsTaR/archive/2010/05/12/best_use_google_analytics.html)

很多网站为了获取用户访问网站的统计信息，使用了google-analytics或其他分析网站(下面的讨论中只提google-analytics,简称ga)。注册ga后，ga就会生成一段js脚本，很多人直接把这段js复制到<body>的最后面就完事(包括博客园、优快云、BlogJava)。可是ga自动生成的这段JS真的就是最合理的吗？

哪怎么样才算是合理，怎样才是不合理了？因ga只是1个分析工具，它的使用绝对不能影响到我们的程序，如果影响了，则是不合理的。不影响则是合理的。

目前ga的使用:

先看看ga自动生成的js脚本，如下：　

 
    1<script type="text/javascript">  
 
    2var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
 
    3document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
 
    4</script>  
 
    5<script type="text/javascript">  
 
    6try { 
 
    7var pageTracker = _gat._getTracker("UA-123456-1"); 
 
    8pageTracker._trackPageview(); 
 
    9} catch(err) {}</script>

看这段代码，使用document.write来加载JS，注意了，这样加载js是阻塞加载的，就是这个js没加载完，后面的所有资源和JS都不能下载和执行。可能你会觉的这段代码在body的最后面，后没已经没内容，没什么会阻塞的了。

还有一些你忽略了，相信很多人在写JS的时候需要在页面加载完毕后执行一些JS或AJAX，一般写在window.onload 事件，或者写入jquery的$(document).ready()方法中。这些JS就会被阻塞。如果我们的页面上很多数据在window.onload中使用AJAX加载，而偏偏这个时候ga因为某些原因(和谐和谐)不能访问，或者访问很慢的时候。问题就来，我们自己的JS一直在等待ga的JS加载完，只有等ga的js加载超时后才会执行我们的JS。

实例：

下面的代码使用jquery在document.ready发送1个ajax请求(请求126.com)。测试前修改host文件，让ga的js无法加载：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 
     01<html xmlns="http://www.w3.org/1999/xhtml"> 
 
     02<head> 
 
     03    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
     04    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
 
     05    <script type="text/javascript"> 
 
     06        $(document).ready(function(){ 
 
     07            $.get("http://www.126.com/"); 
 
     08        }); 
 
     09  </script>    
 
     10</head> 
 
     11<body> 
 
     12    <script type="text/javascript">  
 
     13        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
 
     14        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
 
     15        </script>  
 
     16        <script type="text/javascript">  
 
     17        try { 
 
     18        var pageTracker = _gat._getTracker("UA-123456-1"); 
 
     19        pageTracker._trackPageview(); 
 
     20        } catch(err) {}</script>  
 
     21</body> 
 
     22</html>

监控图：

上图可以看出ga加载不了，在20秒超时后，才执行我们的ajax请求，我们的ajax请求才花0.173s，但却等了20s。

合理使用ga:

要合理使用ga，需要解决2个问题：

1. 如何非加载ga的js，

2. 如何在ga的ja加载完毕后立刻执行 var pageTracker = _gat._getTracker("UA-123456-1");pageTracker._trackPageview(); 代码。

非阻塞加载js的方法，主要有2种：

1. 动态创建<script标签

2.使用new Image().src="", 这种方法只会下载JS，而不会解析JS。所以用这个加载js后，里面的函数也不能调用(这种方法一般用于预加载)。

完善后的代码：

 
    01<script type="text/javascript">  
 
    02    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
 
    03    var head = document.getElementsByTagName("head")[0] || document.documentElement; 
 
    04    var script = document.createElement("script"); 
 
    05    script.src = gaJsHost + "google-analytics.com/ga.js"; 
 
    06    var done = false; // 防止onload，onreadystatechange同时执行 
 
    07    // 加载完毕后执行，适应所有浏览器 
 
    08    script.onload = script.onreadystatechange = function() { 
 
    09        if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){ 
 
    10            done = true; 
 
    11            try { 
 
    12                var pageTracker = _gat._getTracker("UA-123456-16"); 
 
    13                pageTracker._trackPageview(); 
 
    14            } catch(err) {} 
 
    15            script.onload = script.onreadystatechange = null; 
 
    16        } 
 
    17    };  
 
    18    head.insertBefore(script,head.firstChild); 
 
    19</script>

上面代码修改自jquery的ajax代码。上面代码很容易理解，动态创建script来加载js，通过onload,或 onreadystatechange 事件来加载完毕后执行代码。

代码修改完毕后再监控测试如下;

图中看出ga照样加载了20s，但我们的ajax请求并没有等20s后才执行，而是立刻执行了。

j query 加载ga:

可能你觉的上面的代码写的比较多，比较繁琐，如果你用jquery的话，可以简化成下面这样：

 
    1var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
 
    2$.getScript(gaJsHost + "google-analytics.com/ga.js",function(){ 
 
    3try { 
 
    4var pageTracker = _gat._getTracker("UA-123456-16"); 
 
    5pageTracker._trackPageview(); 
 
    6} catch(err) {} 
 
    7});