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性能测试平台方案：
