性能優化-網頁加載耗時資料的搜集

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

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

?

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

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

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

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

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

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

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

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

由于需要測試的産品有多個，理想的情況是自己寫一個腳本，然後每個産品頁面引入一下，自動完成這部分工作。有鑒于上述幾個因素，又經過網上的一些搜尋，發現了雅虎前端編寫的一個性能統計工具：BOOMERANG，利用這個工具可以自動的完成頁面加載時間的統計。它提供的統計項比較多，由于我們需要用到的功能隻有前端整個頁面的加載耗時，是以我從其源碼中把該功能摘錄了出來，實作的原理是利用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; };

通過這種方式，就可以得到較為準确的耗時資料了。

在内網環境我自己電腦上，測試産品C的頁面耗時均值約為1秒；而通過上面的方法，統計線上使用者端的時間消耗均值，約為4秒。兩者差異相當大，可見我們的産品優化潛力還是非常大的。