Google Analytics
目前ga的使用: 先看看ga自動生成的js腳本，代碼以下javascript
1 <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>zidon收到了
看這段代碼，使用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。html
實例： 下面的代碼使用jquery在document.ready發送1個ajax請求(請求126.com)。測試前修改host文件，讓ga的js沒法加載： 代碼以下:java
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.get("http://www.126.com/"); }); </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>
上圖能夠看出ga加載不了，在20秒超時後，才執行咱們的ajax請求，咱們的ajax請求才花0.173s，但卻等了20s。 合理使用ga:jquery
要合理使用ga，須要解決2個問題： ajax
1. 如何非加載ga的js.api
2. 如何在ga的ja加載完畢後馬上執行 var pageTracker = _gat._getTracker("UA-123456-1");pageTracker._trackPageview(); 代碼。瀏覽器
非阻塞加載js的方法，主要有2種：ide
1. 動態建立<script標籤函數
2.使用new Image().src="", 這種方法只會下載JS，而不會解析JS。因此用這個加載js後，裏面的函數也不能調用(這種方法通常用於預加載)。測試
完善後的代碼： 代碼以下:
<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同時執行 // 加載完畢後執行，適應全部瀏覽器 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代碼。上面代碼很容易理解，動態建立script來加載js，經過onload,或 onreadystatechange 事件來加載完畢後執行代碼。
jquery 加載ga:
可能你覺的上面的代碼寫的比較多，比較繁瑣，若是你用jquery的話，能夠簡化成下面這樣： 代碼以下:
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) {} });