網易嚴選的wkwebview測試之路

網易雲社群發表於2018-09-20

本文來自網易雲社群

作者:孫嬌


UIWebView是蘋果繼承於UIView封裝的一個載入web內容的類,它可以載入任何遠端的web資料展示在你的頁面上,你可以像瀏覽器一樣前進後退重新整理等操作。不過蘋果在iOS8以後推出了WKWebView來載入Web。UIWebView自iOS2就有,WKWebView從iOS8才有,毫無疑問WKWebView是將會逐步取代笨重的UIWebView。且UIWebView存在佔用過多記憶體,js執行效率低等問題。而WKWebView網頁載入速度大有提升,佔用更少記憶體。


WKWebView相比於UIWebView

  • WKWebView的記憶體遠遠沒有UIWebView的開銷大,沒有快取

  • 擁有高達60FPS滾動重新整理率及內建手勢

  • 支援了更多的HTML5特性

  • 高效的app和web資訊交換通道

  • 允許JavaScript的Nitro庫載入並使用,UIWebView中限制了

  • 提供載入網頁進度的屬性(estimatedProgress)

  • 將UIWebViewDelegate與UIWebView拆分成了14類與3個協議(以前很多不方便實現的功能得以實現:官方文件說明)

基於以上種種優勢,嚴選APP在年後的第一個版本里實現了UIwebview到wkwebview的大步跨越,作為一名客戶端的測試人員,我更加關注的主要是wkwebview的各大特性背後帶來的測試點,以下就從測試的視角分析一下替換wkwebview之後,測試中遇到比較多的問題:


1、首先就是cookie的問題

以前UIWebView會自動去NSHTTPCookieStorage中讀取cookie,但是WKWebView並不會去讀取,因此導致cookie丟失以及一系列問題,在測試的過程中我們發現在一個活動頁面觸發了登入之後,返回該頁面並沒有同步到登入態的資訊

網易嚴選的wkwebview測試之路

從上圖可以看出,在app進行登入後,福利社的webview並沒有同步獲取相應的登入態,究其原因,主要原因是:WKWebView Cookie 問題在於 WKWebView 發起的請求不會自動帶上儲存於 NSHTTPCookieStorage 容器中的 Cookie(當然是開發解釋給我聽的),找到問題所在修改之後的表現:

網易嚴選的wkwebview測試之路

表現完美!


2、wkwebview的本地html頁面載入失敗

嚴選app內建了一份網路解決方案,如若檢測到無網路狀態可以檢視這個本地頁面進行網路的配置(主要是iOS10系統剛推出的時候,需要使用者開啟app啟動網路的許可權才能使用的問題),但是替換了wkwebview之後,無網路狀態下本地的html網頁無法載入,結果:

網易嚴選的wkwebview測試之路

開發大大排查之後發現是wkwebview中載入的方法變了(wkwebview不支援用loadRequest的方法載入本地的靜態HTML),要替換不同的方法來載入,修復之後的效果


3、wkwebview頁面樣式問題

在測試過程中,替換wkwebview之後,很多APP內的H5頁面樣式出現了相容的問題,尤其是針對iPhone X的適配方面,對此我們只能全域性檢視各種H5頁面,一一檢查頁面是否錯亂,大部分頁面的問題都是頁面底部或者導航欄異常。

網易嚴選的wkwebview測試之路

在測試的過程中我們遇到最多的問題就是上述三個問題,如果各位還有遇到其他的問題,歡迎補充。

除了測試中遇到的問題,測試完成之後,我們對wkwebview的效能也做了簡單的統計,主要是為了對比wkwebview相比較於UIwebview的優勢在哪裡,我們針對兩種不同的webview,在APP內進行一些正常使用者行為的操作(瀏覽首頁及其他頁面,檢視商品詳情及評論圖片,瀏覽活動及專題頁面,登入檢視購物車及下單等等),對比統計了記憶體的消耗佔比。主要操作了三種機型(5s,7,6splus),三種作業系統(9,10,11)。

網易嚴選的wkwebview測試之路

從上圖可以明顯的看出來,wk在記憶體消耗方面還是有顯著的提升的,尤其是針對效能較差的機器,如ios9系統的5s。

最後,WKWebView相較於UIWebView在整體上有較大的提升,滿足OS上面使用同一套控制元件的功能,同時對整個記憶體的開銷以及滾動重新整理率和JS互動做了優化的處理。依據職責單一的原則,拆分成了三個協議去實現WebView的響應,解耦了JS互動和載入進度的響應處理。但是他有一個最致命的缺陷,就是WKWebView的請求不能被NSURLProtocol截獲。而UIwebview可以讓app對於H5容器使用NSURLProtocol技術將H5進行離線包的處理,H5的圖片和Native的圖片公用一套快取,因此WKWebView是沒有做快取處理的,對網頁需要快取的載入效能要求沒那麼高的還是可以考慮UIWebView。

最最後,感謝開發大大的耐心指導及細心講解webview背後的故事。


網易雲免費體驗館,0成本體驗20+款雲產品!

更多網易研發、產品、運營經驗分享請訪問網易雲社群


相關文章:
【推薦】 SpringBoot入門(二)——起步依賴


相關文章