网站首页 服务项目 服务为王 大气样板 网站推广 客户案例 新闻资讯 联系我们
您当前所在位置:网站首页 > 新闻资讯

巧用WebView监控提升WebAPP整体性能

日期:2019-05-28   编辑:

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

为什么是WebView

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

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

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

监控哪些WebView性能数据

透视宝能监控四大类数据:

行为数据:抓取用户在移动端网页点的行为操作,也就是点击网页的内容,分析用的户行为

时间相应数据:分解一个链接从加载开始到完成这段时间内,每个阶段的耗时

Ajax请求数据:抓取终端用户响应时间,响应数据下载时间,数据响应成功的callback执行时间和ajax错误数据

JS错误数据:抓取加载链接的代码错误信息

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

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

②资源时序数据

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

③JS错误及ajax请求数据

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

JS代码注入

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

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

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

网页代码都是由标签组成,都会有这个标签,我们就把JS代码注入到标签之下,放在自己添加的

案例/模板 地址:(点击查看)
手机版/扫码查看

地址:柳州市柳南区红桥三区27号301
电话:182-7837-1312 覃经理
座机:
邮箱:feipuyun@qq.com
网址:http://www.feipuyun.com
© www.lzkt35.com 2007 - 2015