您的位置：首页 > 理论基础 > 计算机网络

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

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

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

目前ga的使用:

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

view source

print?

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

view source

print?

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后，里面的函数也不能调用(这种方法一般用于预加载)。

完善后的代码：

view source

print?

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后才执行，而是立刻执行了。
jquery 加载ga:
可能你觉的上面的代码写的比较多，比较繁琐，如果你用jquery的话，可以简化成下面这样：

view source

print?

1
var
 
gaJsHost = ((
"https:"
 
== document.location.protocol) ?
"https://ssl."
 
:
"http://www."
);
2
$.getScript(gaJsHost +
"google-analytics.com/ga.js"
,
function
(){
3
try
 
{
4
var
 
pageTracker = _gat._getTracker(
"UA-123456-16"
);
5
pageTracker._trackPageview();
6
}
catch
(err) {}
7
});
有需要请查看：高性能WEB开发系列

[声明] 转载请注明出处:http://www.cnblogs.com/BearsTaR/。 禁止商用!


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航