一直以來...都覺得用bootstrap寫的網頁載入速度怎麼都莫名的慢...？
尤其是在本機測試的時候....
一開始以為是自己的CSS改的不夠好
想不到升級到bootstrap v3之後問題依舊！
終於.....忍無可忍去研究到底是載入哪個部分有問題？
起初認為是自己的CSS定義跟bootstrap衝突(因為我大多用覆蓋的...)
但想不到幾次測試後竟然找不到可改善的部分！？
只好用探測器看看了.....
想不到～原來是Google Aalytics的ga.js有問題！？
光載入到完畢就22.4秒！！
拿掉後果然神速秒開！！Orz
但...問題來了～
會加入ga.js當然是有它的必要性.....
那有沒有辦法改善ga.js的載入特性呢？
所幸....上網找到了方法～
在此特別紀錄一下！
三种提高Google Analytics效率的方法
以下內容轉載自數碼維基
原文網址：該如何載入google-analytics(或其他第三方)的JS
尤其是在本機測試的時候....
一開始以為是自己的CSS改的不夠好
想不到升級到bootstrap v3之後問題依舊！
終於.....忍無可忍去研究到底是載入哪個部分有問題？
起初認為是自己的CSS定義跟bootstrap衝突(因為我大多用覆蓋的...)
但想不到幾次測試後竟然找不到可改善的部分！？
只好用探測器看看了.....
想不到～原來是Google Aalytics的ga.js有問題！？
光載入到完畢就22.4秒！！
拿掉後果然神速秒開！！Orz
但...問題來了～
會加入ga.js當然是有它的必要性.....
那有沒有辦法改善ga.js的載入特性呢？
所幸....上網找到了方法～
在此特別紀錄一下！
三种提高Google Analytics效率的方法
以下內容轉載自數碼維基
原文網址：該如何載入google-analytics(或其他第三方)的JS
註冊ga後，ga就會生成一段js腳本，很多人直接把這段js複製到<body>的最後面就完事(包括 博客園、CSDN、BlogJava)。可是ga自動生成的這段JS真的就是最合理的嗎？
哪怎麼樣才算是合理，怎樣才是不合理了？因ga只是1個分析工具，它的使用絕對不能影響到我們的程序，如果影響了，則是不合理的。不影響則是合理的。
看這段代碼，使用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">
監控圖：
上圖可以看出ga載入不了，在20秒超時後，才執行我們的ajax請求，我們的ajax請求才花0.173s，但卻等了20s。
1. 如何非載入ga的js，
2. 如何在ga的ja載入完畢後立刻執行 var pageTracker = _gat._getTracker("UA-123456-1");pageTracker._trackPageview(); 代碼。
哪怎麼樣才算是合理，怎樣才是不合理了？因ga只是1個分析工具，它的使用絕對不能影響到我們的程序，如果影響了，則是不合理的。不影響則是合理的。
目前ga的使用:
先看看ga自動生成的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來載入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">
<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:
要合理使用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後，裡面的函數也不能調用(這種方法一般用於預載入)。
完善後的代碼：
上面代碼修改自jquery的ajax代碼。上面代碼很容易理解，動態創建script來載入js，通過onload,或 onreadystatechange 事件來載入完畢後執行代碼。
代碼修改完畢後再監控測試如下;
圖中看出ga照樣載入了20s，但我們的ajax請求並沒有等20s後才執行，而是立刻執行了。
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 事件來載入完畢後執行代碼。
代碼修改完畢後再監控測試如下;
圖中看出ga照樣載入了20s，但我們的ajax請求並沒有等20s後才執行，而是立刻執行了。
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) {}
});
沒有留言:
張貼留言