使用Navigation timing api测试android webview性能

那么在移动互联网发展到今天，native界面测试已经成为传统，webview+natvie模式已经渐渐来到我们身边，目前市面上也有许许多多hybird类应用，并且我认为这也是未来的趋势，当然最大的好处就是更新成本低，直接更新h5就行了，同时也具有插件化的一些优点。

webview访问基本流程

上图是一个一般的http访问流程，但是考虑到可能有重定向这个东西，所以以下面的图为准

重定向：这一过程其实也走了一遍流程，只不过在响应码返回的是3xx，会指引浏览器重定向连接，这部分可能会导致一定的耗时问题，navigation timing api也提供了这一部分的时间统计。

DNS解析：先去缓存找有没有dns缓存，如果再去hosts里面，还是没有就需要去dns服务器查询了，因为有这一层原因，测试的时候需要清除浏览器缓存。

tcp(https)：因为http是基于tcp的应用层协议，所以需要先建立连接才能进行数据传输，如果是https连接，那么需要建立https的链接，并进行ssl层的证书签名校验，然后才能正常地发送请求响应

request和response：正常发送请求并得到html

parse html：这里webview其实已经拿到html数据了，接下来就是解析成dom树，加载和渲染render，以及一些脚本和样式加载操作，这部分依赖于浏览器内核，这部分浏览器一般是边解析边渲染，以便加快速度

上述的流程只是一个简单归纳，每一个部分都可以扩展很多内容，更多内容可以参考tcp/ip详解和html加载，浏览器渲染的相关内容。

navigation timing api的使用说明

那么这个api是html 5引入的一个统计web界面的新api，对于传统统计web耗时，和移动端测试耗时一样都是在代码里面打点，然后log输出。但是代码统计的方式一是繁琐，而是可能会影响统计时间，所以navigation timing api就诞生了，这套api使用方便，并且是在界面打开之后才统计的，所以对性能影响是微乎其微的，而且这套api是原生支持android的webview调试了，所以为我们测试webview提供的良好的支持。

使用方法非常简单，在chrome按F12就可以出来了，这套api是依赖于window.performance对象的，所以我们从这个api入手

navigation timing api = navigation + timing + others

navigation我们需要记住的就两个方法，一个是重定向的次数，另一个是这个界面的来源。

1) redirectCount是重定向次数

2) type是页面来源类型，有以下几个类型：

3) 那么timing 这个对象提供给我们最重要的时间了，我们通过js代码看一下：

这些时间就是我们需要的性能指标了，所以下一部需要弄懂这些xxoo是什么意思。

这是截取官方文档针对navigation timing api的解析图，对应于timing对象的几个属性。

那么经过第一部分的学习，应该看得懂这幅图的流程了，timing统计的正是这个流程的各个节点。
unloadEventStart和unloadEventEnd，看名字应该是卸载的意思，指的是当前界面卸载上一个同源文档的时间(同源策略指的是只能运行同一域名、协议、端口下的脚本)。

中间的domContentLoadedEventStart和domContentLoadedEventEnd指的是css加载了，需要立即执行的js都执行了的时间。

最后面的loadEventStart和loadEventEnd是onLoad事件的开始结束时间。

嗯，其他的参数应该可以猜到了，就不多解释啦。

android中测试webview的方法

android测试webview的性能其实非常简单，因为chrome插件其实已经给我们提供现成的远程调试工具了：

安装了之后在插件处可以看到一个绿色的小机器人，点击它就可以开启了

那么怎么使用呢
1.在app代码部分，为webview设置允许debug调试

webView.setWebContentsDebuggingEnabled(true);

这样就可以允许远程调试了，当然这个功能只支持4.4以上的系统

2.连接手机，如果adb连接上的话，理论会直接显示出设备

如果当前在设置的webview界面，那么会有inspect这个按钮，点击就进入了调试模式了，和chrome上点击f12一样。

这个工具的使用方法不在这里的讨论范围了，后续再深入学习。我们重点关注的是console的脚本执行这里，在前面部分我们已经学习http(s)请求的流程，以及navigaion timing api提供给我们的统计字段，接下来我们就可以计算出我们的webview加载时间了。
这里列出几个目前用来统计的参数

1)

太多重定向会拖累页面访问速度

2)

这是统计界面获取到数据，做解析和渲染到webview加载完的时间，这部分和处理器性能有关，和网络无关，也就是统计了性能

3)

这个完全依赖于网络了，是属于正式开始访问网络，解析域名，建议握手并获取数据的过程，这部分的耗时往往还参考webview的请求数量和内容相关，这部分时间在笔者项目里往往是对比国内和国外服务器的对比测试。

最后

好了，那么针对webview性能调试的初步就写到这里吧，本篇重点是学习了访问流程和navigation timing api以及android端webview统计耗时的简单使用，后续随着学习的深入再总结如何去测试webview性能相关的东西吧！