性能優化-網頁加載耗時數據的搜集

熱血奇跡 2013-04-19

展開全文

最近需要針對現有的一些線上產品，進行優化工作。首先得對這些產品的性能做一個統計，找出目前問題最嚴重的，優先進行改進。前面我都是通過在自己本地電腦上測試，利用諸如YSLOW、PageSpeed之類的工具來檢測性能。但是通過這些方法，得到的結果都是比較理想的，沒有并發因素，網絡也因為是內網環境，非常給力，每個產品體現出來都還挺快。因此最終還是決定搜集用戶端真實的頁面加載耗時來作為參考標準。

在考慮如何搜集用戶端數據的過程中，一開始，是準備在頁面上通過JS進行埋點，類似這種方式：

<script>
T = T || {};
T.beforeHead = new Date().getTime();
</script>

在頁面的不同點記錄時間戳，最終在load完成后，統計發送到服務端進行分析。但是搜索了網上的資料，發現這種形式存在一些弊端：

1.這會驅使JS引擎比平時更早的加載

2.讓HTML和JS的解析器頻繁更換上下文

3.嵌入的JS代碼片段會阻塞剩余資源的加載

4.不能捕獲到網絡延遲的時間消耗(服務器到客戶端的這一個時間消耗)

5.站點http://首頁的new Date().getTime()在各個瀏覽器中，平均耗時為7.5ms，你的應用越簡單，那么這個時間消耗對你性能測試結果的影響就會越大

6.這種埋點方式也增加了性能測試的工作量，因為你需要花費額外的時間來維護這些JS片段

由于需要測試的產品有多個，理想的情況是自己寫一個腳本，然后每個產品頁面引入一下，自動完成這部分工作。有鑒于上述幾個因素，又經過網上的一些搜索，發現了雅虎前端編寫的一個性能統計工具：BOOMERANG，利用這個工具可以自動的完成http://頁面加載時間的統計。它提供的統計項比較多，由于我們需要用到的功能只有前端整個頁面的加載耗時，因此我從其源碼中把該功能摘錄了出來，實現的原理是利用W3C提供的Navigation Timing API來獲取打開頁面時的時間戳，然后當頁面load完成后，通過new Date().getTime()獲取時間戳，兩者相減極為頁面加載的完整時間。注意目前僅IE9、Chrome6+瀏覽器實現了該API。下面是獲取頁面打開時間戳的代碼：

var _initStartTime = function () {
    var performance, startTime = false;
    performance = window.performance || window.msPerformance || window.webkitPerformance || window.mozPerformance;
 
    if (performance && performance.timing && performance.timing.navigationStart) {
        startTime = performance.timing.navigationStart;
    // Chrome Browser   
    } else if(window.chrome && window.chrome.csi && window.chrome.csi().startE) {
        startTime = w.chrome.csi().startE;
    // The Google Toolbar exposes navigation start time similar to old versions of chrome   
    // This would work for any browser that has the google toolbar installed    
    } else if(window.gtbExternal && window.gtbExternal.startE()) {
        startTime = window.gtbExternal.startE();
    }
    // 解決火狐7.8的bug
    if (navigator.userAgent.match(/Firefox\/[78]\./)) {
        this.navigationStart = performance.timing.unloadEventStart || performance.timing.fetchStart || undefined;
    }
     
    return startTime;
};