H5性能測試方案
H5性能優化之前，需要經過一番性能測試，檢測各個階段的耗時時間，從而對症下藥，針對耗時較長的階段進行調試和優化。那麼有什麼檢測的方法呢？
App端
long t1 = System.currentTimeMillis();
webView.loadUrl("");
webView.setWebChromeClient(new WebChromeClient(){
@Override
public void onReceivedTitle(WebView webView, String s) {
super.onReceivedTitle(webView, s);
long t2 = System.currentTimeMillis();
Log.i("白屏時間：",""+(t2-t1));
}
@Override
public void onProgressChanged(WebView webView, int i) {
if (i == 100) {
long t3 = System.currentTimeMillis();
Log.i("加載耗時時間：",""+(t3-t1));
}
super.onProgressChanged(webView, i);
}
});
H5端
1、在頁面各個階段，如created、mounted、數據請求前、數據處理後，通過打log的方式，獲取時間
logTime: function () {
var date = new Date();
var H = date.getHours();
var M = date.getMinutes();
var S = date.getSeconds();
var MS = date.getMilliseconds();
return H + ":" + M + ":" + S + ":" + MS;
}
2、Navigation Timing獲取頁面加載各個階段所需時間
<script>
function Navigat_time() {
var timing = window.performance.timing;
var start = timing.navigationStart,
dnsTime = 0,
tcpTime = 0,
firstPaintTime = 0,
domRenderTime = 0,
loadTime = 0;
dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;
loadTime = timing.domComplete - start;
console.log('DNS解析時間:'+dnsTime+'\nTCP建立時間:'+tcpTime+'\n首屏時間:'+firstPaintTime,
'\ndom渲染完成時間:'+domRenderTime+'\n頁面onload時間:'+loadTime);
}
</script>
<body onload="Navigat_time()">
<div id=""></div>
</body>
各個階段代表時間：
- navigationStart：加載起始時間
- redirectStart：重定向開始時間（如果發生了HTTP重定向，每次重定向都和當前文檔同域的話，就返回開始重定向的fetchStart的值。其他情況，則返回0）
- redirectEnd：重定向結束時間（如果發生了HTTP重定向，每次重定向都和當前文檔同域的話，就返回最後一次重定向接受完數據的時間。其他情況則返回0）
- fetchStart：瀏覽器發起資源請求時，如果有緩存，則返回讀取緩存的開始時間
- domainLookupStart： 查詢DNS的開始時間。如果請求沒有發起DNS請求，如keep-alive，緩存等，則返回fetchStart
- domainLookupEnd：查詢DNS的結束時間。如果沒有發起DNS請求，同上
- connectStart：開始建立TCP請求的時間。如果請求是keep-alive，緩存等，則返回domainLookupEnd
- secureConnectionStart：如果在進行TLS或SSL，則返回握手時間
- connectEnd：完成TCP鏈接的時間。如果是keep-alive，緩存等，同connectStart
- requestStart： 發起請求的時間
- responseStart： 服務器開始響應的時間
- domLoading：開始解析第一批收到的 HTML 文檔字節
- domInteractive：完成對所有 HTML 的解析並且 DOM 構建完成
- DomContentLoadedEvent：DOM 準備就緒並且沒有樣式表阻止 JavaScript 執行的時間點，這意味着現在我們可以構建渲染樹了。許多 JavaScript 框架都會等待此事件發生後，纔開始執行它們自己的邏輯。因此，瀏覽器會捕獲
EventStart和EventEnd時間戳，讓我們能夠追蹤執行所花費的時間。 - domComplete： dom渲染完成，並且網頁上的所有資源（圖像等）都已下載完畢
- loadEventStart：觸發load的時間，如沒有則返回0
- loadEventEnd：load事件執行完的時間，如沒有則返回0
- unloadEventStart：unload事件觸發的時間
- unloadEventEnd： unload事件執行完的時間
Navigation Timing 官方文檔：Navigation Timing
此外，分享一篇騰訊H5性能測試平臺方案：
