iOS开发秘笈：如何通过WebView监控提升WebAPP性能

相对于需要专业移动开发人员的原生应用&＃xff08;Native APP&＃xff09;&＃xff0c;基于HTML5/CSS/Javascript的WebAPP凭借开发者门槛低、迭代迅速、支持跨平台发布等特点&＃xff0c;成为电商、银行等网络服务、浏览类应用的首选&＃xff0c;然而由于页面渲染导致的性能差距是WebAPP与原生应用无法抗衡的最大原因&＃xff0c;因此针对WebView组件的性能优化就显得至关重要。

为什么是WebView

WebAPP所显示的Web页面都是由一个叫做WebView的组件渲染出来的&＃xff0c;每个网页都有一个链接即URL&＃xff0c;首先将URL转换成NSURLRequest&＃xff0c;然后用加载网页的类WebView加载Request&＃xff0c;使用 - (void)loadRequest:(NSURLRequest *)request这个方法&＃xff0c;就能将网页加载显示出来。

目前iOS中有两个加载网页的类&＃xff0c;分别是UIWebView和WKWebView&＃xff0c;UIWebView是UIKit框架中的一个类&＃xff0c;而WKWebView是WebKit框架中的类&＃xff0c;从性能上来说WKWebView的性能高、稳定性好、占用内存小&＃xff0c;完全优于UIWebView。但由于WKWebView是iOS8提供的组件&＃xff0c;因此系统版本低于iOS 8.0的iPhone/iPad用户就无法正常使用WKWebView组件开发出来的APP。所以目前大部分开发人员还在使用性能、稳定性并不理想的UIWebView进行WebAPP开发&＃xff0c;而本文所说的云智慧透视宝WebView性能监控也是以UIWebView为主要优化目标。

要进行性能监控必须获得WebAPP页面加载全过程的性能数据&＃xff0c;透视宝是通过向当前加载链接的html5、jsp、php网页代码中注入获取数据的JS代码&＃xff0c;然后通过OC与JS交互&＃xff0c;将数据传递给OC&＃xff0c;然后再将数据整理发送到透视宝后端。

监控哪些WebView性能数据
透视宝能监控四大类数据&＃xff1a;

♦ 行为数据&＃xff1a;抓取用户在移动端网页点的行为操作&＃xff0c;也就是点击网页的内容&＃xff0c;分析用户的行为

♦时间相应数据&＃xff1a;分解一个链接从加载开始到完成这段时间内&＃xff0c;每个阶段的耗时

♦ Ajax请求数据&＃xff1a;抓取终端用户响应时间&＃xff0c;响应数据下载时间&＃xff0c;数据响应成功的callback执行时间和ajax错误数据

♦ JS错误数据&＃xff1a;抓取加载链接的代码错误信息

① 时间响应数据及数据计算公式

&＃xff08;图片来源&＃xff1a;51cto技术博客&＃xff09;

参见上图&＃xff0c;JS传给透视宝的时间响应数据就是这些字段&＃xff0c;其中navigationStart是起点&＃xff0c;所有的计算都需要依赖于它。分析移动端H5性能数据&＃xff0c;其实就是测算HTML5、JSP、PHP等网页元素在iOS上加载的时间长短&＃xff0c;通过这些性能数据前段开发人员能够准确发现性能问题并及时解决&＃xff0c;下表是透视宝定义的响应时间分解数据及计算方案&＃xff1a;

② 资源时序数据

每一个网页都是有很多资源组成的&＃xff0c;包括.js、.png、.jpg、.css、script等&＃xff0c;每一个元素的加载都需要加载时间&＃xff0c;资源时序数据就是准确记录每一个元素的加载时间及类型&＃xff0c;并把这些数据通过JS的performance接口直接获得并传给OC&＃xff0c;不需要计算。

③ JS错误及ajax请求数据

JS错误指的是抓取网页代码的错误&＃xff0c;包括错误类型及堆栈信息&＃xff0c;直接定位错误。ajax请求的数据有请求的链接、uri、 终端用户响应时间&＃xff0c;响应数据下载时间&＃xff0c;数据响应成功的callback执行时间和ajax错误数据。JS错误和ajax请求数据都是有JS代码直接获取到&＃xff0c;不需要处理。

JS代码注入
想要准确监测网页性能就需要进行代码注入&＃xff0c;而只有拿到网页的代码才能注入&＃xff0c; UIWebView这个类里面除了三个加载链接的方法和4个代理方法&＃xff0c;就没有其他内容了&＃xff0c;而这些方法并不能获取到内容&＃xff0c;所以我们就需要考虑其他方法。UIWebView在加载拦截的时候会进入NSURLProtocol这个类&＃xff0c;而恰好这个类能拿到当前加载链接NSURLRequest&＃xff0c;而且会走进这个类的 - (void)startLoading方法&＃xff0c;这个方法在页面load完成之前&＃xff0c;页面刚加载之后&＃xff0c;所以就是我们所需要的。

创建一个类&＃xff0c;继承NSURLProtocol这个类&＃xff0c;重写startLoading方法&＃xff0c;由于能拿到链接的request&＃xff0c;所以我们就对这个链接发送请求&＃xff0c;用原生态的NSURLConnection或者NSURLSession都可以&＃xff0c;我们用的NSURLConnection这个类发送请求并设置代理&＃xff0c;方法是这个 - (nullableinstancetype)initWithRequest:(NSURLRequest*)request delegate:(nullableid)delegate startImmediately:(BOOL)startImmediately&＃xff0c;

NSURLConnection的代理方法中有一个能接受请求链接数据的方法&＃xff0c; - (void)connection:(NSURLConnection )connection didReceiveData:(NSData )data&＃xff0c;得到的NSData是16进制的字节流数据&＃xff0c;通过utf8转码将字节流转换成字符串&＃xff0c;然后发现这个字符串正好是这个当前加载网页的代码&＃xff0c;

网页代码都是由标签组成&＃xff0c;都会有这个标签&＃xff0c;我们就把JS代码注入到标签之下&＃xff0c;放在自己添加的标签中;代码实现就是获取字符串中这个字符的位置&＃xff0c;然后在其下面插入用包装的js代码&＃xff0c;然后转回成新的NSData的字节流数据。

由于页面还没有加载&＃xff0c;我们已经改动代码了&＃xff0c;就需要把注入JS代码的重新记载一次&＃xff0c;需要用NSURLProtocol的代理属性NSURLProtocolClient&＃xff0c;用NSURLProtocolClient这个中的这个方法- (void)URLProtocol:(NSURLProtocol)protocol didLoadData:(NSData)data&＃xff0c;将新的NSData加载一次&＃xff0c;转回成NSData是因为这个方法需要的是NSData数据。

当然上面只是介绍主要实现的一些方法&＃xff0c;还需要用到NSURLConnection的其他代理方法&＃xff0c;只是这些方法不需要添加什么&＃xff0c;按照常规处理就行了&＃xff0c;就不一一介绍了。

性能数据获取
加载链接过程中JS代码就会通过performance接口获取数据&＃xff0c;然后获取的这些数据需要传给移动端&＃xff0c;如何传递数据呢&＃xff0c;传递数据的过程也叫OC与JS交互的过程。

获取数据的时机&＃xff1a;

由于不清楚什么时候JS能拿到数据&＃xff0c;所以从最开始就需要进行交互的监控&＃xff0c;也就是加载链接的时候&＃xff0c;因为透视宝SDK用来监控的所以我们不能直接使用这个方法&＃xff0c;需要用到OC的运行时&＃xff0c;动态加载机制&＃xff0c;又叫hook。首先通过添加UIWebView的类目&＃xff0c;添加类目是将UIWebView类的实现分散出来&＃xff0c;每个类都是由NSbject继承下去&＃xff0c;所以每个类都有 &＃43; (void)load方法&＃xff0c;而且这个方法的执行是最早的&＃xff0c;我们就在这个方法中使用OC的运行时runtime&＃xff0c;使用一个方法交换UIWebView加载链接的三个方法的指针&＃xff0c;这样就会在执行加载方法之前执行我们交换出来的方法&＃xff0c;在这个方法里面我们传递一个与JS匹配的标识&＃xff0c;通过标识相同来获取数据&＃xff0c;这样做的目的就是能从最开始就监控数据的传递。

页面加载资源时序图

通过上述方法&＃xff0c;透视宝能够准确获取用户访问APP时的前端用户体验&＃xff0c;分析网页元素的响应时间和对用户的影响&＃xff0c;包括平均耗时、是否超过容忍时间、总用户数和受影响用户数以及在此事件上产生错误和崩溃的用户数&＃xff0c;判断关键事件的性能影响严重程度&＃xff0c;提供给APP开发人员进行进行针对性的性能优化。