巧用WebView監控提升WebAPP整體性能

相對于需要專業移動開發人員的原生應用(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轉碼將字節流轉換成字符串，然后發現這個字符串正好是這個當前加載網頁的代碼，

網站名稱：巧用WebView監控提升WebAPP整體性能
網站網址：http://m.kartarina.com/news34/261034.html

成都網站建設公司_創新互聯，為您提供虛擬主機、企業建站、微信公眾號、App設計、關鍵詞優化、Google

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯