性能優(yōu)化-網(wǎng)頁加載耗時數(shù)據(jù)的搜集

熱血奇跡 2013-04-19

展開全文

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

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

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

在頁面的不同點記錄時間戳，最終在load完成后，統(tǒng)計發(fā)送到服務(wù)端進行分析。但是搜索了網(wǎng)上的資料，發(fā)現(xiàn)這種形式存在一些弊端：

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

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

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

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

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

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

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