Android WebView监控页面加载详情

Android中通常使用WebView为基础控件来访问网页，即使是腾讯的X5内核WebView也是包含了源生WebView的特性和接口
那么以监控WebView加载Web页面的详情为实现目标，先知道需要监控什么参数指标。
业内评价网页加载耗时一般有三个指标：网页完整加载时间、白屏时间、首屏时间。
这三个值定义不做赘述，下面叙述如何取到这些监控参数。

设计思路：通过WebView向访问的html文件中注入JavaScript代码，获取所需的关键参数，并回传给Java。

先讲如何在html页面中获取到我们需要的三个时间节点，JavaScript编码。

html在浏览器中加载的过程，可以细分为很多个阶段，大体可以分为：“网络请求阶段”，“页面加载阶段”，“页面渲染阶段”。详细介绍移步https://www.w3.org/TR/navigation-timing/

image.png

如上述，页面加载耗时可以拆分为数个单步阶段（DNS解析，HTTPS请求，html文件解析，资源渲染），每个单步耗时都可以代表本次请求任务中单个模块的运行情况，方便使用者定位问题并对网站和浏览器进行针对性优化。

图片描述的是html文件中的performance.timing属性，其中记录了网页加载周期中每个关键步骤的时间戳，关于performance的描述移步：http://javascript.ruanyifeng.com/bom/performance.html

通过获取performance.timing这个时间戳合集对象，能够得到Web页面完全加载时间的耗时，算式如下：
var timing = performance.timing;
完全加载时间 = timing.loadEventEnd - timing.navigationStart;

上述公式中：
loadEventend代表页面加载完全结束，若页面未加载完就销毁WebView对象或者跳转到新的页面，则取值为0；
navigationStart代表页面开始加载，该值为WebView开始加载页面的起始时间戳；

接下来介绍白屏时间和首屏时间算法

当使用者开始访问网页，在屏幕范围内出现任何内容即算白屏结束，页面开始加载至此时的耗时，就叫做白屏时间；
当使用者开始访问网页，屏幕范围内所有需要加载的内容都加载完成时，页面开始加载至此时的耗时，就叫做首屏时间；

由此可见，在任何文字、图片在页面中出现时记为白屏时间，一般情况有如下场景。
1、html中元素仅有文字；
2、html中元素仅有图片；
3、html中元素有图片也有文字；
考虑到现在互联网上的门户和页面基本不存在仅有图片的场景，且段落文字在页面的渲染与Dom树异步执行，会比图片资源和脚本资源的渲染更快，所以一般以<head></head>标签结束的时间为白屏时间。那么在performance.timing对象中，取domLoading事件时间戳为白屏时间，公式如下：
var timing = performance.timing;
白屏时间 = timing.domLoading - timing.navigationStart;

根据白屏时间描述得到，在屏幕内资源加载&渲染的过程中，图片资源是渲染最慢的页面元素，那么可以认为屏幕可见范围内最后一张图片加载完成的事件时间戳，即为首屏时间。

首先，如何判断图片资源在首屏范围内。这里以元素对象中的页面高度值来判断，因为在WebView访问门户网站时，一般会跳转到对应的手机版Web，此类页面宽度适配手机屏幕，只需上下滑动，所以判断页面元素是否在首屏范围内可以通过对象中的页面高度值来判断，手机屏幕的高度取值方法：

      var top =0;
      top=window.pageYOffset?window.pageYOffset:document.documentElement.scrollTop;

其次需要获取所有图片元素在页面中的高度，并获取其加载完成的时间戳。
通过获取所有图片元素对象，并绑定‘load’事件，在‘load’事件的响应函数中，获取时间戳，即为该图片加载完成时间。
那么首屏时间为所有图片元素中加载时间的最大值，实现如下：

    var fsItems = [];             //存放图片元素
    document.addEventListener('load', function (event) {
      if (event) {
        var target = event.target;
        if('img'==target.localName){        //只取图片元素
          fsItems.push({img:target,time:+new Date});
        }
        if('style'==target.localName){
          fwItems.push({img:target,time:+new Date});
        }
      }
    }, true);
    var firstScreen = 0;
    for(var i=0;i<fsItems.length;i++){
       var item=fsItems[i],img=item['img'],time=item['time'],top=getOffsetTop(img);
       if(top>0&&top<sh){              //判断是否页面内元素
         firstScreen=time>firstScreen?time:firstScreen;
       }
    }

至此，JavaScript如何在html中获取首屏时间、白屏时间、完全加载时间已叙述完毕，下面开始记录如何在webview中注入JS代码，Java编码。

WebView注入JS代码通过回调接口中的WebView对象调用loadUrl()方法，注入代码：

String Script = getJsFile("Screen.js");
webview.loadUrl(Script);

根据页面访问请求唯一的特性，代码注入也需要回调接口在单次请求中回调唯一性，即仅被调用一次，可选用的接口如下：
WebViewClient：

//WebView开始加载页面时回调，当存在302页面跳转时，会发起一条新的onPageStarted
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon)

//WebView发起的WEB请求因为网络原因失败时回调
@Override
public void onReceivedError(WebView view, WebResourceRequest request,
     WebResourceError error)

//WebView发起的WEB请求收到服务器的错误消息时回调
@Override
public void onReceivedHttpError(WebView view, WebResourceRequest request,
     WebResourceResponse errorResponse)

//WebView发起的WEB请求完成时回调
@Override
public void onPageFinished(WebView view, String url)

WebChromeClient：

//WebView加载任意网络请求时回调，包括html、网络图片
//此回调虽然在单次页面请求时不只被回调一次，但是需要对页面所有请求做监控时，是个好选择
@Override
public void onProgressChanged(WebView view, int newProgress)

//在WebView载入<head></head>标签结束时回调
@Override
public void onReceivedTitle(WebView view, String title)

结合上述回调接口的描述，发现只有onReceivedTitle接口符合要求，因为此时页面有效访问，且不影响所需取值。

总结
Android端对WebView发起的WEB请求做页面加载详情的监控，只需要把取白屏时间、首屏时间、完全加载时间的JS脚本以字符串的形式，在WebView的onReceivedTitle回调接口通过webview.loadUrl()注入即可。