背景
- 代碼混亂無序,新老js交互雜亂,不利于后續(xù)維護
- 打開webView時每次都是創(chuàng)建新的webView, 初始化webView時耗費比較多的時間,影響用戶體驗
- 頁面返回時,webView也隨著銷毀薄疚,導致我們回調給web的返回事件處理不穩(wěn)定,存在任務還沒處理完web就銷毀了
優(yōu)化方案
-
AKWebView(基礎層)
AKWebView是基于WKWebView的封裝赊琳,實現了JS+Native的調用街夭,cookies的同步管理,常見的網頁和客戶端處理躏筏。
- 基礎配置層:
WKWebViewConfiguration相關配置
日志打印配置
配置項根據實際需求擴展
- 加載管理:
加載網頁(重新加載板丽,忽略緩存重新加載)
加載本地html文件
- cookies管理:
提供cookies的同步,cookies插入趁尼,刪除等方法(采用js方式注入cookies)埃碱。
cookies本地化緩存管理(目前我們項目沒有做本地化緩存)。
- JS交互:
原生調用JS:OC通過腳本注入的方式調用JS(evaluateJavaScript)酥泞。
JS調用原生:S通過WKScriptMessageHandler協議調用Native砚殿,WKScriptMessageHandler的使用非常的簡單易用
- 其他:
請求攔截,以便實現離線包功能
兼容post請求
-
AKWebViewController
- UI層:
- 導航欄配置:標題芝囤,顯隱似炎,自定義返回按鈕辛萍,自定義右側按鈕
- 加載進度條:根據web加載進度顯示進度條
- cookies管理:
- domain-config獲取cookies配置,注入cookies時使用
- cookie生成羡藐,注入
- js交互:
- 原生調用js贩毕。
- js調用原生:新交互(字典形式),老交互(數組形式)仆嗦。
優(yōu)化思路
webView加載過程:
初始化 WebView -> 請求頁面 -> 下載數據 -> 解析HTML -> 請求 js/css 資源 -> dom 渲染 -> 解析 JS 執(zhí)行 -> JS 請求數據 -> 解析渲染 -> 下載渲染圖片
在dom渲染前辉阶,Web頁面都是白屏,所以優(yōu)化的思路就是優(yōu)化dom渲染前的時間耗時瘩扼。從上圖可以看出優(yōu)化主要集中優(yōu)化以下兩個階段
WebView的初始化階段谆甜,這個階段可以采用類似UITableViewCell的復用池機制來解決。
初始化后到渲染前的階段的優(yōu)化集绰,請求頁面规辱、下載數據、請求js/css資源這些階段可以通過提前下載H5資源到本地倒慧,加載H5的時候加載本地資源來優(yōu)化(通過注冊SchemeHandler實現)。
-
AKWebViewReusePool(webView復用池)
優(yōu)化WebView初始化耗時的方式是在app啟動之后啟動一個WebView的復用池包券,創(chuàng)建一些備用的WebView
類結構:
復用結束:
- 清空各種delegate
- 清空sessionStorage
- 清除backForwardList
- 加載一個空頁面