本發(fā)明涉及網(wǎng)站性能監(jiān)測領(lǐng)域，特別涉及一種基于WebView網(wǎng)頁加載性能及用戶行為流數(shù)據(jù)采集的方法。

背景技術(shù)：

近年來，隨著移動通信技術(shù)的普及和智能手機(jī)的發(fā)展，移動端各類APP已經(jīng)成為人們?nèi)粘Ｉ钪胁豢煞指畹囊徊糠?。尤其Html5技術(shù)的提出，使得跨平臺的web應(yīng)用日漸興起。隨著Html5在移動端的普及，移動端對WebView的使用越來越頻繁，針對WebView組件的性能監(jiān)控與優(yōu)化就顯得越來越重要。同時，越來越多的廠商已經(jīng)開始意識到數(shù)據(jù)是最有價值的資產(chǎn)，開始重視用戶在使用應(yīng)用過程中產(chǎn)生的各類交互數(shù)據(jù)，那么，如何能更方便的采集和分析這類數(shù)據(jù)也變得愈發(fā)的重要。

傳統(tǒng)的網(wǎng)站性能監(jiān)測通常有以下幾種方式：

一、借助傳統(tǒng)的開發(fā)者工具查看網(wǎng)絡(luò)請求，例如瀏覽器的F12工具、Fiddler、Charles等等?；痉绞绞峭ㄟ^追蹤HTTP請求與響應(yīng)的時間，以圖形的方式列出所有資源的下載情況。這種方式依賴于人為操作，難以實(shí)現(xiàn)批量測試與統(tǒng)計(jì)。

二、使用侵入式的JavaScript代碼檢測DOM事件的發(fā)生時間。例如DOMContentLoaded和document.onreadystatechange等等。這種方式會在頁面中引入額外的代碼，加重了開發(fā)者與測試人員的負(fù)擔(dān)，還有可能因?yàn)闄z測代碼本身的潛在問題影響頁面的性能。

三、使用第三方的服務(wù)與工具，例如WebPagetest、Pingdom等等，這些服務(wù)通常能夠?qū)崿F(xiàn)在不同瀏覽器和不同地域進(jìn)行測試，并且為用戶提供一些優(yōu)化建議。但某些服務(wù)需要排隊(duì)等待，并且多次測試結(jié)果之間往往區(qū)別較大。第一種方式的問題也同樣存在。

除此之外，以上各種方式的測量指標(biāo)都比較單一，基本只能起到計(jì)時和流量計(jì)算的作用。對于其它一些指標(biāo)，例如電池狀態(tài)等無能為力。并且難以實(shí)現(xiàn)自動化，以及在持續(xù)集成流程中統(tǒng)計(jì)測試結(jié)果。

基于上述問題，W3C Web性能工作小組與各瀏覽器廠商都已認(rèn)識到性能對于web開發(fā)的重要性，為了解決當(dāng)前性能測試的困難，W3C推出了一套性能API標(biāo)準(zhǔn)，各種瀏覽器對這套標(biāo)準(zhǔn)的支持如今也逐漸成熟起來。這套API的目的是簡化開發(fā)者對網(wǎng)站性能進(jìn)行精確分析與控制的過程，最終實(shí)現(xiàn)性能的提高。其中還包括了一些新協(xié)議與HTML元素的提議，目的是讓內(nèi)容的展現(xiàn)更快、更加優(yōu)化。本發(fā)明中用于獲取性能數(shù)據(jù)的方法便是使用此Performance API提供的一些接口。

XMLHttpRequest是一個JavaScript對象，它最初由微軟設(shè)計(jì),隨后被Mozilla、Apple和Google采納.如今，該對象已經(jīng)被W3C組織標(biāo)準(zhǔn)化。通過它，你可以很容易的取回一個URL上的資源數(shù)據(jù)。盡管名字里有XML，但XMLHttpRequest可以取回所有類型的數(shù)據(jù)資源，并不局限于XML。而且除了HTTP,它還支持file和ftp協(xié)議。Ajax是一種技術(shù)方案，它依賴的是現(xiàn)有的CSS/HTML/Javascript，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象，是這個對象使得瀏覽器可以發(fā)出HTTP請求與接收HTTP響應(yīng)，而且每次請求的狀態(tài)發(fā)生變化時，都會觸發(fā)onreadystatechange事件，要檢測Ajax請求的性能與錯誤，首要的，就是實(shí)現(xiàn)onreadystatechange的代理。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明的目的在于克服現(xiàn)有技術(shù)的缺點(diǎn)與不足，提供一種基于WebView網(wǎng)頁加載性能及用戶行為流數(shù)據(jù)采集的方法，解決現(xiàn)有WebView組件被大量使用卻難以進(jìn)行性能監(jiān)測的問題，為移動應(yīng)用開發(fā)中加載網(wǎng)頁的應(yīng)用提供支持，為后續(xù)產(chǎn)品的優(yōu)化提供建議。該方法操作簡便，能夠以插件的形式運(yùn)行，或者只需添加幾行代碼即可實(shí)現(xiàn)監(jiān)控，同時不會影響到加載網(wǎng)頁以及APP本身的性能。

本發(fā)明的目的通過以下的技術(shù)方案實(shí)現(xiàn)：

一種基于WebView網(wǎng)頁加載性能及用戶行為流數(shù)據(jù)采集的方法，包含以下步驟：

S1、利用WebView加載用戶選擇的網(wǎng)頁，同時監(jiān)聽WebView的頁面加載完成事件；

S2、通過實(shí)現(xiàn)步驟S1中所述加載完成的回調(diào)方法，在系統(tǒng)提供的接口插入一段JS代碼，這段代碼用于在網(wǎng)頁的head標(biāo)簽中新引入一個JS文件，而性能檢測和用戶行為數(shù)據(jù)采集的方法都位于這個文件中；

S3、當(dāng)網(wǎng)頁加載完成后，步驟2中所引入的JS文件便能通過調(diào)用Performance API接口獲取到頁面加載的性能數(shù)據(jù)，同時，通過設(shè)置Listener監(jiān)聽頁面當(dāng)中的Ajax請求，JS錯誤，用戶點(diǎn)擊流等；

S4、最后，通過系統(tǒng)提供的原生代碼與JS代碼交互的API，便能將采集到的數(shù)據(jù)傳遞給APP端，通過APP再將性能數(shù)據(jù)和行為數(shù)據(jù)上傳至服務(wù)器進(jìn)行處理保存。

步驟S1中，所述監(jiān)聽WebView的頁面加載完成事件，對于Android系統(tǒng)，是通過為WebView設(shè)置WebViewClient，實(shí)現(xiàn)其中的onPageFinished方法；對于IOS系統(tǒng)，是實(shí)現(xiàn)JavaScriptCore.framework框架中的webView Did Finish Load方法。

步驟S2中，所述插入一段JS代碼，對于Android系統(tǒng)，是通過調(diào)用WebView的loadUrl方法來實(shí)現(xiàn)的；對于IOS系統(tǒng)，是通過內(nèi)置的string By Evaluating Java Script From String方法實(shí)現(xiàn)的。JS代碼即為JavaScript代碼。

步驟S3中，所述性能數(shù)據(jù)，其獲取是通過Performance API接口取得，其中Ajax性能數(shù)據(jù)通過設(shè)置XML HttpRequest的代理對象，同時監(jiān)聽狀態(tài)變化實(shí)現(xiàn)，點(diǎn)擊流數(shù)據(jù)通過監(jiān)聽onclick事件實(shí)現(xiàn)。

步驟S4中，所述原生代碼與JS代碼的交互方式為：對于Android系統(tǒng)，是在WebView組件中使用addJavascriptInterface接口，聲明Java類，該類中的public函數(shù)都能夠被外部Javascript代碼調(diào)用；對于IOS系統(tǒng)，是通過使用JavaScriptCore.framework框架，在webViewDidFinishLoad方法里編寫代碼來實(shí)現(xiàn)JS給OC傳值，至于OC調(diào)用JS，則使用內(nèi)置string By Evaluating Java Script From String方法。

進(jìn)一步地，所述步驟S2監(jiān)聽WebView的頁面加載完成事件，具體包括以下幾方面：

1.1)Android系統(tǒng)中是通過為WebView設(shè)置WebViewClient，再實(shí)現(xiàn)其中的onPageFinished方法，在這個回調(diào)方法中，通過webview的loadUrl方法注入JS代碼，注入的代碼中有用于性能監(jiān)測和行為數(shù)據(jù)采集的JS文件地址；

1.2)IOS系統(tǒng)中是實(shí)現(xiàn)webViewDidFinishLoad方法，并且通過UIWebView提供的stringByEvaluatingJavaScriptFromString使JS和WebView進(jìn)行互通。

進(jìn)一步地，所述步驟S3通過加載預(yù)先編寫的JS文件獲取到頁面加載的性能數(shù)據(jù)和點(diǎn)擊流數(shù)據(jù)，具體包括以下步驟：

2.1)通過獲取頁面加載Navigation Timing和頁面資源加載Resource Timing這兩個API來取得性能數(shù)據(jù)。其中性能數(shù)據(jù)可以包括網(wǎng)頁的加載時間(也包括網(wǎng)頁資源如圖片、CSS、JS等的加載時間)，DOM解析時間，DNS查詢時間等；

2.2)通過addEventListener()方法將指定的事件監(jiān)聽器注冊到EventTarget上，當(dāng)該對象觸發(fā)指定的事件如加載文檔或圖像時發(fā)生錯誤，指定的回調(diào)函數(shù)就會被執(zhí)行，獲取到JS錯誤信息，錯誤類型以及詳細(xì)堆棧信息；

2.3)通過設(shè)置XMLHttpRequest的代理對象，包括為XMLHttpRequest設(shè)置prototype，監(jiān)聽open、send、readystatechange等狀態(tài)發(fā)生改變的方法，取得響應(yīng)時間、請求耗時以及Ajax錯誤信息；

2.4)通過監(jiān)聽onclick事件實(shí)現(xiàn)當(dāng)某一DOM元素被點(diǎn)擊觸發(fā)時，獲取到詳細(xì)的標(biāo)簽名、加載鏈接、內(nèi)嵌文本信息等并傳遞到應(yīng)用端。

進(jìn)一步地，所述步驟S4通過WebView進(jìn)行Android或IOS代碼與JS代碼的交互，具體包括以下步驟：

3.1)Android系統(tǒng)中是通過addJavascriptInterface方法進(jìn)行添加對象映射，對象名稱和方法名稱約定好即可，然后就可以通過映射名.方法名進(jìn)行方法的調(diào)用，參數(shù)的傳遞。至于向webview注入JS代碼可以通過webview.loadUrl("javascript:xxx")來實(shí)現(xiàn)，然后就會執(zhí)行javascript后面的代碼。

3.2)IOS系統(tǒng)中可以通過UIWebView提供的stringByEvaluatingJavaScriptFromString使OS調(diào)用JS和WebView進(jìn)行互通，而JS調(diào)用OC可以使用JavaScriptCore.framework框架。

本發(fā)明與現(xiàn)有技術(shù)相比，具有如下優(yōu)點(diǎn)和有益效果：

1、本發(fā)明無需手動再編寫代碼，已編寫好插件，利用提供的插件即可實(shí)現(xiàn)數(shù)據(jù)采集，而且不會影響性能。

2、本發(fā)明采集的數(shù)據(jù)及時、準(zhǔn)確，充分利用了系統(tǒng)提供的各個接口，后續(xù)可以根據(jù)不同的發(fā)送策略發(fā)送到服務(wù)器端進(jìn)行處理和保存。

3、本發(fā)明支持Android、IOS等多平臺WebView數(shù)據(jù)的監(jiān)控和采集，已編寫好的JavaScript文件與平臺無關(guān)。

附圖說明

圖1為本發(fā)明所述一種基于WebView網(wǎng)頁加載性能及用戶行為流數(shù)據(jù)采集的方法的流程圖。

圖2為Java對象與JavaScript代碼相互調(diào)用關(guān)系示意圖。

圖3為一個網(wǎng)頁請求發(fā)出的整個過程中，各個環(huán)節(jié)各個屬性的時間順序圖。

具體實(shí)施方式

下面結(jié)合實(shí)施例及附圖對本發(fā)明作進(jìn)一步詳細(xì)的描述，但本發(fā)明的實(shí)施方式不限于此。

如圖1所示，一種基于WebView網(wǎng)頁加載性能及用戶行為流數(shù)據(jù)采集的方法，包括以下步驟：

S1、利用WebView加載用戶選擇的網(wǎng)頁，同時監(jiān)聽WebView的頁面加載完成事件；

S2、通過實(shí)現(xiàn)步驟1中提及的加載完成回調(diào)方法，Android系統(tǒng)調(diào)用WebView的loadUrl方法，IOS則是stringByEvaluatingJavaScriptFromString方法，插入一段JS代碼，這段代碼主要用來在網(wǎng)頁的head標(biāo)簽中新引入一個預(yù)先編寫的JS文件，而性能檢測和用戶行為數(shù)據(jù)采集的方法都位于這個文件中；

S3、當(dāng)網(wǎng)頁加載完成后，步驟2中所引入的JS文件便能獲取到頁面加載的性能數(shù)據(jù)，同時，通過設(shè)置Listener監(jiān)聽頁面當(dāng)中的Ajax請求，JS錯誤，用戶點(diǎn)擊流數(shù)據(jù)等；

S4、最后，通過系統(tǒng)提供的原生代碼與JS代碼交互的API，便能將采集到的數(shù)據(jù)傳遞給APP端，通過APP再通過不同的發(fā)送策略將性能數(shù)據(jù)和行為數(shù)據(jù)上傳至服務(wù)器端進(jìn)行處理保存。

如圖2所示，在步驟S2中關(guān)于移動應(yīng)用原生代碼與WebView中JS代碼交互的方法，細(xì)化步驟如下：

2.1)在Android系統(tǒng)中，使Web頁面中的Javascript代碼可以調(diào)用Android應(yīng)用程序中的Java代碼進(jìn)而執(zhí)行程序或訪問系統(tǒng)資源，該功能由addJavaScriptInterface接口實(shí)現(xiàn)，在WebView組件中使用addJavascriptInterface接口，聲明Java類，該類中的public函數(shù)都可以被外部Javascript代碼調(diào)用，具體調(diào)用關(guān)系如圖2所示。

2.2)IOS系統(tǒng)則是通過使用JavaScriptCore.framework框架，在webViewDidFinishLoad方法里編寫代碼來實(shí)現(xiàn)JS給OC傳值的，至于OC調(diào)用JS，則使用內(nèi)置的stringByEvaluatingJavaScriptFromString方法，需要注意的是調(diào)用這個方法要在網(wǎng)頁加載完成之后。

如圖3所示為Performance API中的各個屬性，在一個請求發(fā)出的整個過程中，各個環(huán)節(jié)的時間順序。通過這些屬性可以幫助我們快速獲取頁面的Domready時間、onload時間、白屏?xí)r間等，以及單個頁面資源在從發(fā)送請求到獲取到response各階段的性能參數(shù)。表1為Performance API中Timing對象的各個屬性的具體解釋。

表1

在步驟S3中對頁面性能數(shù)據(jù)的獲取以及行為數(shù)據(jù)的采集，細(xì)化步驟如下：

3.1)關(guān)于DNS查詢耗時、TCP連接耗時、request請求耗時、解析Dom樹耗時、白屏?xí)r間、Domready時間、onload時間等性能數(shù)據(jù)的計(jì)算，可通過計(jì)算上面performance.timing中各個屬性的差值進(jìn)行，計(jì)算方法如下：

DNS查詢耗時：domainLookupEnd-domainLookupStart

TCP鏈接耗時：connectEnd-connectStart

Request請求耗時：responseEnd-respuestStart

解析Dom樹耗時：domComplete-domInteractive

白屏?xí)r間：responseStart-navigationStart

Domready時間：domContentLoadedEventEnd-navigationStart

onload時間：loadEventEnd-navigationStart

3.2)關(guān)于頁面Javascript錯誤的捕獲，則是通過使用window.addEventListener的形式去監(jiān)聽window.onerror方法，通過error.message，error.stack，error.lineno.error.colno等可以得到錯誤出現(xiàn)的行號和列號，錯誤的詳細(xì)信息以及堆棧內(nèi)容，再進(jìn)行序列化即可到應(yīng)用端。

3.3)關(guān)于頁面Ajax性能數(shù)據(jù)的采集，則是通過設(shè)置window.XMLHttpRequest的代理對象，當(dāng)頁面有Ajax請求發(fā)生時，會先調(diào)用到代理的對象，再由代理對象去調(diào)用原始的XMLHttpRequest中對應(yīng)方法。并且，通過監(jiān)聽readystatechange事件，當(dāng)Ajax請求的狀態(tài)發(fā)生改變，如由OPENED->HEADERS_RECEIVED->LOADING->DONE變化的整個過程中，監(jiān)聽到不同狀態(tài)的變化可以立即進(jìn)行時間的記錄，從而得到像響應(yīng)下載時間、回調(diào)函數(shù)執(zhí)行時間等不同的時間性能數(shù)據(jù)。至于請求過程中的其他數(shù)據(jù)，比如超時(ontimeout)、錯誤(onerror)等，可以參考上述監(jiān)聽readystatechange的方法同樣實(shí)現(xiàn)。

3.4)關(guān)于用戶點(diǎn)擊流數(shù)據(jù)的采集，則是通過監(jiān)聽onclick事件實(shí)現(xiàn)的。當(dāng)事件在某一DOM元素被觸發(fā)時，例如用戶在a標(biāo)簽上點(diǎn)擊鼠標(biāo)，事件將跟隨著該節(jié)點(diǎn)繼承自的各個父節(jié)點(diǎn)冒泡穿過整個的DOM節(jié)點(diǎn)層次，直到它遇到依附有該事件類型處理器的節(jié)點(diǎn)，此時，該事件是onclick事件。事件的處理將從DOM層次的根開始，而不是從觸發(fā)事件的目標(biāo)元素開始，事件被從目標(biāo)元素的所有祖先元素依次往下傳遞。在這個過程中，事件會被從文檔根到事件目標(biāo)元素之間各個繼承派生的元素所捕獲。當(dāng)捕獲到點(diǎn)擊事件時，可同時得到dom元素類型，包含的文本等，一并傳遞給應(yīng)用端處理。

上述實(shí)施例為本發(fā)明較佳的實(shí)施方式，但本發(fā)明的實(shí)施方式并不受上述實(shí)施例的限制，其他的任何未背離本發(fā)明的精神實(shí)質(zhì)與原理下所作的改變、修飾、替代、組合、簡化，均應(yīng)為等效的置換方式，都包含在本發(fā)明的保護(hù)范圍之內(nèi)。