一种基于WebView网页加载性能及用户行为流数据采集的方法与流程

本发明涉及网站性能监测领域，特别涉及一种基于WebView网页加载性能及用户行为流数据采集的方法。

背景技术：

近年来，随着移动通信技术的普及和智能手机的发展，移动端各类APP已经成为人们日常生活中不可分割的一部分。尤其Html5技术的提出，使得跨平台的web应用日渐兴起。随着Html5在移动端的普及，移动端对WebView的使用越来越频繁，针对WebView组件的性能监控与优化就显得越来越重要。同时，越来越多的厂商已经开始意识到数据是最有价值的资产，开始重视用户在使用应用过程中产生的各类交互数据，那么，如何能更方便的采集和分析这类数据也变得愈发的重要。

传统的网站性能监测通常有以下几种方式：

一、借助传统的开发者工具查看网络请求，例如浏览器的F12工具、Fiddler、Charles等等。基本方式是通过追踪HTTP请求与响应的时间，以图形的方式列出所有资源的下载情况。这种方式依赖于人为操作，难以实现批量测试与统计。

二、使用侵入式的JavaScript代码检测DOM事件的发生时间。例如DOMContentLoaded和document.onreadystatechange等等。这种方式会在页面中引入额外的代码，加重了开发者与测试人员的负担，还有可能因为检测代码本身的潜在问题影响页面的性能。

三、使用第三方的服务与工具，例如WebPagetest、Pingdom等等，这些服务通常能够实现在不同浏览器和不同地域进行测试，并且为用户提供一些优化建议。但某些服务需要排队等待，并且多次测试结果之间往往区别较大。第一种方式的问题也同样存在。

除此之外，以上各种方式的测量指标都比较单一，基本只能起到计时和流量计算的作用。对于其它一些指标，例如电池状态等无能为力。并且难以实现自动化，以及在持续集成流程中统计测试结果。

基于上述问题，W3C Web性能工作小组与各浏览器厂商都已认识到性能对于web开发的重要性，为了解决当前性能测试的困难，W3C推出了一套性能API标准，各种浏览器对这套标准的支持如今也逐渐成熟起来。这套API的目的是简化开发者对网站性能进行精确分析与控制的过程，最终实现性能的提高。其中还包括了一些新协议与HTML元素的提议，目的是让内容的展现更快、更加优化。本发明中用于获取性能数据的方法便是使用此Performance API提供的一些接口。

XMLHttpRequest是一个JavaScript对象，它最初由微软设计,随后被Mozilla、Apple和Google采纳.如今，该对象已经被W3C组织标准化。通过它，你可以很容易的取回一个URL上的资源数据。尽管名字里有XML，但XMLHttpRequest可以取回所有类型的数据资源，并不局限于XML。而且除了HTTP,它还支持file和ftp协议。Ajax是一种技术方案，它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应，而且每次请求的状态发生变化时，都会触发onreadystatechange事件，要检测Ajax请求的性能与错误，首要的，就是实现onreadystatechange的代理。

技术实现要素：

本发明的目的在于克服现有技术的缺点与不足，提供一种基于WebView网页加载性能及用户行为流数据采集的方法，解决现有WebView组件被大量使用却难以进行性能监测的问题，为移动应用开发中加载网页的应用提供支持，为后续产品的优化提供建议。该方法操作简便，能够以插件的形式运行，或者只需添加几行代码即可实现监控，同时不会影响到加载网页以及APP本身的性能。

本发明的目的通过以下的技术方案实现：

一种基于WebView网页加载性能及用户行为流数据采集的方法，包含以下步骤：

S1、利用WebView加载用户选择的网页，同时监听WebView的页面加载完成事件；

S2、通过实现步骤S1中所述加载完成的回调方法，在系统提供的接口插入一段JS代码，这段代码用于在网页的head标签中新引入一个JS文件，而性能检测和用户行为数据采集的方法都位于这个文件中；

S3、当网页加载完成后，步骤2中所引入的JS文件便能通过调用Performance API接口获取到页面加载的性能数据，同时，通过设置Listener监听页面当中的Ajax请求，JS错误，用户点击流等；

S4、最后，通过系统提供的原生代码与JS代码交互的API，便能将采集到的数据传递给APP端，通过APP再将性能数据和行为数据上传至服务器进行处理保存。

步骤S1中，所述监听WebView的页面加载完成事件，对于Android系统，是通过为WebView设置WebViewClient，实现其中的onPageFinished方法；对于IOS系统，是实现JavaScriptCore.framework框架中的webView Did Finish Load方法。

步骤S2中，所述插入一段JS代码，对于Android系统，是通过调用WebView的loadUrl方法来实现的；对于IOS系统，是通过内置的string By Evaluating Java Script From String方法实现的。JS代码即为JavaScript代码。

步骤S3中，所述性能数据，其获取是通过Performance API接口取得，其中Ajax性能数据通过设置XML HttpRequest的代理对象，同时监听状态变化实现，点击流数据通过监听onclick事件实现。

步骤S4中，所述原生代码与JS代码的交互方式为：对于Android系统，是在WebView组件中使用addJavascriptInterface接口，声明Java类，该类中的public函数都能够被外部Javascript代码调用；对于IOS系统，是通过使用JavaScriptCore.framework框架，在webViewDidFinishLoad方法里编写代码来实现JS给OC传值，至于OC调用JS，则使用内置string By Evaluating Java Script From String方法。

进一步地，所述步骤S2监听WebView的页面加载完成事件，具体包括以下几方面：

1.1)Android系统中是通过为WebView设置WebViewClient，再实现其中的onPageFinished方法，在这个回调方法中，通过webview的loadUrl方法注入JS代码，注入的代码中有用于性能监测和行为数据采集的JS文件地址；

1.2)IOS系统中是实现webViewDidFinishLoad方法，并且通过UIWebView提供的stringByEvaluatingJavaScriptFromString使JS和WebView进行互通。

进一步地，所述步骤S3通过加载预先编写的JS文件获取到页面加载的性能数据和点击流数据，具体包括以下步骤：

2.1)通过获取页面加载Navigation Timing和页面资源加载Resource Timing这两个API来取得性能数据。其中性能数据可以包括网页的加载时间(也包括网页资源如图片、CSS、JS等的加载时间)，DOM解析时间，DNS查询时间等；

2.2)通过addEventListener()方法将指定的事件监听器注册到EventTarget上，当该对象触发指定的事件如加载文档或图像时发生错误，指定的回调函数就会被执行，获取到JS错误信息，错误类型以及详细堆栈信息；

2.3)通过设置XMLHttpRequest的代理对象，包括为XMLHttpRequest设置prototype，监听open、send、readystatechange等状态发生改变的方法，取得响应时间、请求耗时以及Ajax错误信息；

2.4)通过监听onclick事件实现当某一DOM元素被点击触发时，获取到详细的标签名、加载链接、内嵌文本信息等并传递到应用端。

进一步地，所述步骤S4通过WebView进行Android或IOS代码与JS代码的交互，具体包括以下步骤：

3.1)Android系统中是通过addJavascriptInterface方法进行添加对象映射，对象名称和方法名称约定好即可，然后就可以通过映射名.方法名进行方法的调用，参数的传递。至于向webview注入JS代码可以通过webview.loadUrl("javascript:xxx")来实现，然后就会执行javascript后面的代码。

3.2)IOS系统中可以通过UIWebView提供的stringByEvaluatingJavaScriptFromString使OS调用JS和WebView进行互通，而JS调用OC可以使用JavaScriptCore.framework框架。

本发明与现有技术相比，具有如下优点和有益效果：

1、本发明无需手动再编写代码，已编写好插件，利用提供的插件即可实现数据采集，而且不会影响性能。

2、本发明采集的数据及时、准确，充分利用了系统提供的各个接口，后续可以根据不同的发送策略发送到服务器端进行处理和保存。

3、本发明支持Android、IOS等多平台WebView数据的监控和采集，已编写好的JavaScript文件与平台无关。

附图说明

图1为本发明所述一种基于WebView网页加载性能及用户行为流数据采集的方法的流程图。

图2为Java对象与JavaScript代码相互调用关系示意图。

图3为一个网页请求发出的整个过程中，各个环节各个属性的时间顺序图。

具体实施方式

下面结合实施例及附图对本发明作进一步详细的描述，但本发明的实施方式不限于此。

如图1所示，一种基于WebView网页加载性能及用户行为流数据采集的方法，包括以下步骤：

S1、利用WebView加载用户选择的网页，同时监听WebView的页面加载完成事件；

S2、通过实现步骤1中提及的加载完成回调方法，Android系统调用WebView的loadUrl方法，IOS则是stringByEvaluatingJavaScriptFromString方法，插入一段JS代码，这段代码主要用来在网页的head标签中新引入一个预先编写的JS文件，而性能检测和用户行为数据采集的方法都位于这个文件中；

S3、当网页加载完成后，步骤2中所引入的JS文件便能获取到页面加载的性能数据，同时，通过设置Listener监听页面当中的Ajax请求，JS错误，用户点击流数据等；

S4、最后，通过系统提供的原生代码与JS代码交互的API，便能将采集到的数据传递给APP端，通过APP再通过不同的发送策略将性能数据和行为数据上传至服务器端进行处理保存。

如图2所示，在步骤S2中关于移动应用原生代码与WebView中JS代码交互的方法，细化步骤如下：

2.1)在Android系统中，使Web页面中的Javascript代码可以调用Android应用程序中的Java代码进而执行程序或访问系统资源，该功能由addJavaScriptInterface接口实现，在WebView组件中使用addJavascriptInterface接口，声明Java类，该类中的public函数都可以被外部Javascript代码调用，具体调用关系如图2所示。

2.2)IOS系统则是通过使用JavaScriptCore.framework框架，在webViewDidFinishLoad方法里编写代码来实现JS给OC传值的，至于OC调用JS，则使用内置的stringByEvaluatingJavaScriptFromString方法，需要注意的是调用这个方法要在网页加载完成之后。

如图3所示为Performance API中的各个属性，在一个请求发出的整个过程中，各个环节的时间顺序。通过这些属性可以帮助我们快速获取页面的Domready时间、onload时间、白屏时间等，以及单个页面资源在从发送请求到获取到response各阶段的性能参数。表1为Performance API中Timing对象的各个属性的具体解释。

表1

在步骤S3中对页面性能数据的获取以及行为数据的采集，细化步骤如下：

3.1)关于DNS查询耗时、TCP连接耗时、request请求耗时、解析Dom树耗时、白屏时间、Domready时间、onload时间等性能数据的计算，可通过计算上面performance.timing中各个属性的差值进行，计算方法如下：

DNS查询耗时：domainLookupEnd-domainLookupStart

TCP链接耗时：connectEnd-connectStart

Request请求耗时：responseEnd-respuestStart

解析Dom树耗时：domComplete-domInteractive

白屏时间：responseStart-navigationStart

Domready时间：domContentLoadedEventEnd-navigationStart

onload时间：loadEventEnd-navigationStart

3.2)关于页面Javascript错误的捕获，则是通过使用window.addEventListener的形式去监听window.onerror方法，通过error.message，error.stack，error.lineno.error.colno等可以得到错误出现的行号和列号，错误的详细信息以及堆栈内容，再进行序列化即可到应用端。

3.3)关于页面Ajax性能数据的采集，则是通过设置window.XMLHttpRequest的代理对象，当页面有Ajax请求发生时，会先调用到代理的对象，再由代理对象去调用原始的XMLHttpRequest中对应方法。并且，通过监听readystatechange事件，当Ajax请求的状态发生改变，如由OPENED->HEADERS_RECEIVED->LOADING->DONE变化的整个过程中，监听到不同状态的变化可以立即进行时间的记录，从而得到像响应下载时间、回调函数执行时间等不同的时间性能数据。至于请求过程中的其他数据，比如超时(ontimeout)、错误(onerror)等，可以参考上述监听readystatechange的方法同样实现。

3.4)关于用户点击流数据的采集，则是通过监听onclick事件实现的。当事件在某一DOM元素被触发时，例如用户在a标签上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获。当捕获到点击事件时，可同时得到dom元素类型，包含的文本等，一并传递给应用端处理。

上述实施例为本发明较佳的实施方式，但本发明的实施方式并不受上述实施例的限制，其他的任何未背离本发明的精神实质与原理下所作的改变、修饰、替代、组合、简化，均应为等效的置换方式，都包含在本发明的保护范围之内。