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>

 

Android h5性能 测试 h5性能测试方法_Android h5性能 测试

各个阶段代表时间：

  • 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