很多網(wǎng)站為了獲取用戶訪問(wèn)網(wǎng)站的統(tǒng)計(jì)信息，使用了google-analytics或其他分析網(wǎng)站(下面的討論中只提google-analytics,簡(jiǎn)稱ga)。注冊(cè)ga后，ga就會(huì)生成一段js腳本，很多人直接把這段js復(fù)制到<body>的最后面就完事(包括 博客園、CSDN、BlogJava)。可是ga自動(dòng)生成的這段JS真的就是最合理的嗎？
哪怎么樣才算是合理，怎樣才是不合理了？因ga只是1個(gè)分析工具，它的使用絕對(duì)不能影響到我們的程序，如果影響了，則是不合理的。不影響則是合理的。
目前ga的使用:
先看看ga自動(dòng)生成的js腳本，如下：
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-123456-1");
pageTracker._trackPageview();
} catch(err) {}</script>
看這段代碼，使用document.write來(lái)加載JS，注意了，這樣加載js是阻塞加載的，就是這個(gè)js沒(méi)加載完，后面的所有資源和JS都不能下載和執(zhí)行。可能你會(huì)覺(jué)的這段代碼在body的最后面，后沒(méi)已經(jīng)沒(méi)內(nèi)容，沒(méi)什么會(huì)阻塞的了。
還有一些你忽略了，相信很多人在寫JS的時(shí)候需要在頁(yè)面加載完畢后執(zhí)行一些JS或AJAX，一般寫在window.onload 事件，或者寫入jquery的$(document).ready()方法中。這些JS就會(huì)被阻塞。如果我們的頁(yè)面上很多數(shù)據(jù)在window.onload中使用AJAX加載，而偏偏這個(gè)時(shí)候ga因?yàn)槟承┰?和諧和諧)不能訪問(wèn)，或者訪問(wèn)很慢的時(shí)候。問(wèn)題就來(lái)，我們自己的JS一直在等待ga的JS加載完，只有等ga的js加載超時(shí)后才會(huì)執(zhí)行我們的JS。
實(shí)例：
下面的代碼使用jquery在document.ready發(fā)送1個(gè)ajax請(qǐng)求(請(qǐng)求126.com)。測(cè)試前修改host文件，讓ga的js無(wú)法加載：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ">
<html xmlns=">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="></script>
<script type="text/javascript">
$(document).ready(function(){
$.get("
});
</script>
</head>
<body>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-123456-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
監(jiān)控圖：
上圖可以看出ga加載不了，在20秒超時(shí)后，才執(zhí)行我們的ajax請(qǐng)求，我們的ajax請(qǐng)求才花0.173s，但卻等了20s。
合理使用ga:
要合理使用ga，需要解決2個(gè)問(wèn)題：
1. 如何非加載ga的js，
2. 如何在ga的ja加載完畢后立刻執(zhí)行 var pageTracker = _gat._getTracker("UA-123456-1");pageTracker._trackPageview(); 代碼。
非阻塞加載js的方法，主要有2種：
1. 動(dòng)態(tài)創(chuàng)建<script標(biāo)簽
2.使用new Image().src="", 這種方法只會(huì)下載JS，而不會(huì)解析JS。所以用這個(gè)加載js后，里面的函數(shù)也不能調(diào)用(這種方法一般用于預(yù)加載)。
完善后的代碼：
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
var head = document.getElementsByTagName("head")[0] || document.documentElement;
var script = document.createElement("script");
script.src = gaJsHost + "google-analytics.com/ga.js";
var done = false; // 防止onload，onreadystatechange同時(shí)執(zhí)行
// 加載完畢后執(zhí)行，適應(yīng)所有瀏覽器
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){
done = true;
try {
var pageTracker = _gat._getTracker("UA-123456-16");
pageTracker._trackPageview();
} catch(err) {}
script.onload = script.onreadystatechange = null;
}
};
head.insertBefore(script,head.firstChild);
</script>
上面代碼修改自jquery的ajax代碼。上面代碼很容易理解，動(dòng)態(tài)創(chuàng)建script來(lái)加載js，通過(guò)onload,或 onreadystatechange 事件來(lái)加載完畢后執(zhí)行代碼。
代碼修改完畢后再監(jiān)控測(cè)試如下;
圖中看出ga照樣加載了20s，但我們的ajax請(qǐng)求并沒(méi)有等20s后才執(zhí)行，而是立刻執(zhí)行了。
jquery 加載ga:
可能你覺(jué)的上面的代碼寫的比較多，比較繁瑣，如果你用jquery的話，可以簡(jiǎn)化成下面這樣：
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
$.getScript(gaJsHost + "google-analytics.com/ga.js",function(){
try {
var pageTracker = _gat._getTracker("UA-123456-16");
pageTracker._trackPageview();
} catch(err) {}
});
有需要請(qǐng)查看：高性能WEB開(kāi)發(fā)系列