AKWebView

背景

  • 代碼混亂無序,新老js交互雜亂,不利于后續(xù)維護
  • 打開webView時每次都是創(chuàng)建新的webView, 初始化webView時耗費比較多的時間,影響用戶體驗
  • 頁面返回時,webView也隨著銷毀薄疚,導致我們回調給web的返回事件處理不穩(wěn)定,存在任務還沒處理完web就銷毀了

優(yōu)化方案

  • AKWebView(基礎層)
WKWebView結構.png

AKWebView是基于WKWebView的封裝赊琳,實現了JS+Native的調用街夭,cookies的同步管理,常見的網頁和客戶端處理躏筏。

AKWebView架構圖.png
  1. 基礎配置層:
  • WKWebViewConfiguration相關配置

  • 日志打印配置

  • 配置項根據實際需求擴展

  1. 加載管理:
  • 加載網頁(重新加載板丽,忽略緩存重新加載)

  • 加載本地html文件

  1. cookies管理:
  • 提供cookies的同步,cookies插入趁尼,刪除等方法(采用js方式注入cookies)埃碱。

  • cookies本地化緩存管理(目前我們項目沒有做本地化緩存)。

  1. JS交互:
  • 原生調用JS:OC通過腳本注入的方式調用JS(evaluateJavaScript)酥泞。

  • JS調用原生:S通過WKScriptMessageHandler協議調用Native砚殿,WKScriptMessageHandler的使用非常的簡單易用

  1. 其他:
  • 請求攔截,以便實現離線包功能

  • 兼容post請求

  • AKWebViewController
AKWebViewController.png
  1. UI層:
  • 導航欄配置:標題芝囤,顯隱似炎,自定義返回按鈕辛萍,自定義右側按鈕
  • 加載進度條:根據web加載進度顯示進度條
  1. cookies管理:
  • domain-config獲取cookies配置,注入cookies時使用
  • cookie生成羡藐,注入
  1. js交互:
  • 原生調用js贩毕。
  • js調用原生:新交互(字典形式),老交互(數組形式)仆嗦。

優(yōu)化思路

webView加載過程:

初始化 WebView -> 請求頁面 -> 下載數據 -> 解析HTML -> 請求 js/css 資源 -> dom 渲染 -> 解析 JS 執(zhí)行 -> JS 請求數據 -> 解析渲染 -> 下載渲染圖片


加載過程.jpg

在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

類結構:
復用池類圖.png
復用結束:
  • 清空各種delegate
  • 清空sessionStorage
  • 清除backForwardList
  • 加載一個空頁面
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末纫谅,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子溅固,更是在濱河造成了極大的恐慌付秕,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件侍郭,死亡現場離奇詭異询吴,居然都是意外死亡,警方通過查閱死者的電腦和手機亮元,發(fā)現死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進店門猛计,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人爆捞,你說我怎么就攤上這事奉瘤。” “怎么了煮甥?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵盗温,是天一觀的道長。 經常有香客問我成肘,道長卖局,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任双霍,我火速辦了婚禮砚偶,結果婚禮上批销,老公的妹妹穿的比我還像新娘。我一直安慰自己蟹演,他們只是感情好风钻,可當我...
    茶點故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著酒请,像睡著了一般骡技。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上羞反,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天布朦,我揣著相機與錄音,去河邊找鬼昼窗。 笑死是趴,一個胖子當著我的面吹牛,可吹牛的內容都是我干的澄惊。 我是一名探鬼主播唆途,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼掸驱!你這毒婦竟也來了肛搬?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤毕贼,失蹤者是張志新(化名)和其女友劉穎温赔,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體鬼癣,經...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡陶贼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了待秃。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拜秧。...
    茶點故事閱讀 40,144評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖章郁,靈堂內的尸體忽然破棺而出腹纳,到底是詐尸還是另有隱情,我是刑警寧澤驱犹,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布嘲恍,位于F島的核電站,受9級特大地震影響雄驹,放射性物質發(fā)生泄漏佃牛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一医舆、第九天 我趴在偏房一處隱蔽的房頂上張望俘侠。 院中可真熱鬧象缀,春花似錦、人聲如沸爷速。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽惫东。三九已至莉给,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間廉沮,已是汗流浹背颓遏。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留滞时,地道東北人叁幢。 一個月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像坪稽,于是被迫代替她去往敵國和親曼玩。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,092評論 2 355

推薦閱讀更多精彩內容

  • 為了更好的閱讀體驗窒百,建議閱讀原文插播廣告 —— 幾十行代碼完成資訊類App多種形式內容頁HybridPageKit...
    deqzhu閱讀 4,467評論 0 10
  • 為了更好的閱讀體驗黍判,建議閱讀原文 想和我一起全面了解新聞類App的開發(fā),點我學習 據相關數據顯示贝咙,截至2017年底...
    deqzhu閱讀 9,021評論 10 152
  • 前端開發(fā)面試題 面試題目: 根據你的等級和職位的變化样悟,入門級到專家級拂募,廣度和深度都會有所增加庭猩。 題目類型: 理論知...
    怡寶丶閱讀 2,587評論 0 7
  • 前端開發(fā)面試題 <a name='preface'>前言</a> 只看問題點這里 看全部問題和答案點這里 本文由我...
    自you是敏感詞閱讀 761評論 0 3
  • <a name='html'>HTML</a> Doctype作用?標準模式與兼容模式各有什么區(qū)別? (1)陈症、<...
    clark124閱讀 3,490評論 1 19