监控WebView请求中的页面性能数据，各个资源请求时间，JS错误等

核心其实就是 https://github.com/jwcqc/WebViewMonitor/blob/master/app/src/main/assets/collector.js 这个js文件，当WebView中页面加载完成后，通过重写WebViewClient的onPageFinished(WebView view, String url) 方法，调用WebView的loadUrl去加载一段JS，新加一个script标签到head标签中，并在script中包含要注入的collecotr.js的url地址，再为加入的script标签添加onload事件，确保该script已加载完成后调用js文件中编写好的的startWebViewMonitor()方法即可。

代码中首先为webview提供了一个接口，注入了一个 Java 对象到页面中，以实现 Java 和 Javascript 的交互：

webview.addJavascriptInterface(new JSObject(), "myObj");

在collecor.js中分别写有两个方法，将获取到的性能数据传递给JSObject对象：

function sendResourceTiming(e) {
	myObj.sendResource(JSON.stringify(e))
};

function sendErrors() {
	var err = errorMonitor.getError();
	if (err.length > 0) {
		var errorInfo = {
	        type: "monitor_error",
            payload: {
	            url: hrefUrl,
	            domain: hostname,
	            uri: pathname,
	            error_list: err
            }
        };

        myObj.sendError(JSON.stringify(errorInfo))
    }
};

然后在JSObject这个对象中相应的方法即可捕获到数据，然后进行处理：

public class JSObject {

    @JavascriptInterface
    public void sendResource(String msg) {
       //handleResource(msg);
    }

    @JavascriptInterface
    public void sendError(String msg) {
        //handleError(msg);
    }
}

至于collector.js中对页面性能数据获取的实现方法，则是通过Performance API实现的，这里主要用到了页面加载Navigation Timing和页面资源加载Resource Timing，这两个API非常有用，可以帮助我们获取页面的domready时间、onload时间、白屏时间等，以及单个页面资源在从发送请求到获取到response各阶段的性能参数。

Navigation Timing对象包含了各种与浏览器性能有关的时间数据，提供浏览器处理网页各个阶段的耗时，它包含的页面性能属性如下表：

浏览器获取网页时，会对网页中每一个静态资源（脚本文件、样式表、图片文件等等）发出一个HTTP请求。Resource Timing可以获取到单个静态资源从开始发出请求到获取响应之间各个阶段的Timing，返回的是一个对象数组，数组的每一个项都是一个对象，这个对象中包含了当前静态资源的加载Timing用法如下:

var resourcesObj = performance.getEntries();

获取到这些数据以后，如果需要进一步获得其他对我们比较有用的页面性能数据，比如DNS查询耗时、TCP链接耗时、request请求耗时、解析dom树耗时、白屏时间、domready时间、onload时间等，可以通过上面的performance.timing各个属性的差值计算得到，方法如下：

DNS查询耗时 ：domainLookupEnd - domainLookupStart
TCP链接耗时 ：connectEnd - connectStart
request请求耗时 ：responseEnd - responseStart
解析dom树耗时 ： domComplete- domInteractive
白屏时间 ：responseStart - navigationStart
domready时间 ：domContentLoadedEventEnd - navigationStart
onload时间 ：loadEventEnd - navigationStart

JS错误的捕获，只需通过调用addEventListener(type, listener, useCapture)，type传error即可。

具体的实现方法，可以仔细查看代码。

参考链接：
http://www.bubuko.com/infodetail-1228020.html
https://segmentfault.com/a/1190000004010453