關(guān)鍵詞
WKWebView優(yōu)化兔港、混合式開發(fā)、WKWebView+TableView逊抡、WKWebView與js交互
主要內(nèi)容
1伦意、本文內(nèi)容致力于解決WKWebView在實(shí)際使用中的各種問題火窒，包括性能優(yōu)化、提高響應(yīng)速度驮肉、靜態(tài)資源預(yù)加載等問題熏矿。
2、本文內(nèi)容也可以為WKWebView+TableView的混合式開發(fā)提供思路與解決方案离钝。
3票编、因本人技術(shù)水平所限，文中不可避免會出現(xiàn)錯誤卵渴，歡迎大家探討指點(diǎn)慧域。
WKWebview性能優(yōu)化節(jié)點(diǎn)與對應(yīng)方案
1、WkWebView時間消耗可能的節(jié)點(diǎn)
- 頁面中初始化WKWebView時間消耗浪读；
- WkWebView加載js昔榴、css、image等靜態(tài)資源時間消耗碘橘；
- WKWebView渲染頁面時間消耗互订；
2、對應(yīng)主要的時間消耗痘拆，我的解決方案如下
- WKWebView做成單例屁奏，常駐內(nèi)存，避免實(shí)例化帶來的時間消耗错负，同時避免大量創(chuàng)建造成的內(nèi)存消耗；
- js勇边、css犹撒、image等進(jìn)行離線緩存或提前預(yù)加載，避免展示等時候才加載粒褒，減少加載靜態(tài)資源的時間消耗识颊；
- image可以考慮使用native預(yù)加載，WKWebView中的圖片由native加載好的進(jìn)行替換奕坟；
- 關(guān)于頁面渲染時間消耗沒什么好說的祥款，只能將頁面盡可能做的簡單清晰，在代碼優(yōu)化上多做功夫月杉。重度交互放在native上刃跛，WKWebView只做豐富內(nèi)容的展示；
概要設(shè)計
主要設(shè)計思想
- 服務(wù)端返回一個頭部包含js苛萎、css內(nèi)容的桨昙、可以作為所有頁面殼資源的殼文件（shell.html）检号，native使用shell以單例的方式實(shí)例化一個WKWebView；
- 當(dāng)用戶在瀏覽列表頁時蛙酪，接口返回每個頁面所包含的image集合、頁面body內(nèi)容（數(shù)據(jù)接口在稍后給出），App可以選擇是否對圖片進(jìn)行預(yù)加載以提高WKWebView的響應(yīng)速度（例如wifi情況下）指厌；
- 進(jìn)入包含WkWebView的頁面以后凉逛，使用列表頁中取得的圖片和body內(nèi)容對shell.html中的body內(nèi)容進(jìn)行替換，刷新WkWebView內(nèi)容阁危。也可以根據(jù)ID讀取本地緩存文件實(shí)現(xiàn)內(nèi)容替換玛痊，可操作性較強(qiáng)。
核心模塊及所需方法
1欲芹、資源管理模塊
- 能夠根據(jù)接口返回的信息有條件地下載js卿啡、css、shell.html等靜態(tài)資源菱父，存儲到指定的位置颈娜。
- 能夠?qū)o態(tài)資源文件進(jìn)行管理，包括：刪除緩存浙宜，更新資源等操作官辽。
- 能夠?qū)σ呀?jīng)瀏覽過的頁面數(shù)據(jù)及相關(guān)字段信息進(jìn)行緩存，能夠?qū)@部分資源進(jìn)行管理粟瞬，包括：清除老舊信息同仆、對應(yīng)ID查找指定的頁面信息、更新其中的字段信息等裙品。
2俗批、WKWebView單例類
- 以單例模式生成shell.html文件頁面；
- 能夠根據(jù)model刷新頁面信息市怎；
- 支持常用的與js的交互能力岁忘；
- 代理方法能夠支持獲取必要的頁面信息；
各部分詳細(xì)代碼請參照: iOS WKWebView優(yōu)化方案（二）
