前言

WKWebView 秒開方案，不僅需要端上優(yōu)化，也需要前后端配合，我們業(yè)務(wù)前期在UIWebView上已經(jīng)通過各種優(yōu)化達(dá)到了秒開，但是由于蘋果2020年12月份就不允許上架UIWebView，所以我們緊急切換到WKWebView，但由于WKWebView在啟動初始化的時候表現(xiàn)還是不如人意，我們的目標(biāo)是低端機型至少大部分頁面也能秒開。經(jīng)過一系列的優(yōu)化操作，實現(xiàn)效果和數(shù)據(jù)都是非?？捎^的。

秒開流程圖

秒開方案

1、模板下載。

2、首圖預(yù)加載。

3、正文列表body預(yù)取。

4、CDN預(yù)加載。

5、雙緩存池（目前一共不超過8個）：一個負(fù)責(zé)feed流列表滾動停止時異步執(zhí)行js預(yù)熱；一個負(fù)責(zé)進(jìn)入文章后準(zhǔn)備好一個干凈的WKWebview供下一次未命中秒開WKWebview使用。

6、點擊cell命中預(yù)熱好的秒開WKWebview，則進(jìn)行預(yù)熱下一篇文章，這樣提高秒開率。

7、initpage預(yù)熱好的WebView需要先放在屏幕最右側(cè)隱藏，在進(jìn)入后顯示并重設(shè)frame回歸正常視圖中。

8、feed流預(yù)熱的WebView通過initPage傳false參數(shù)、進(jìn)入文章頁后的WebView通過initPage傳true參數(shù)，為保證不會刷新跳動，模板中有設(shè)置flag確保一次initPage

9、動態(tài)js回填方案：load模板 → 成功會收到前端橋接Ready狀態(tài) → 客戶端收到Ready狀態(tài)會進(jìn)行initPage操作，此時只是靜態(tài)加載頁面渲染顯示給用戶看的界面，不會觸發(fā)任何網(wǎng)絡(luò)或其他模板加載，initPage成功后會回調(diào)init狀態(tài) → 客戶端收到init狀態(tài)會進(jìn)行執(zhí)行showPage操作，表示已經(jīng)進(jìn)入頁面需要繼續(xù)加載好所有未加載好的邏輯，例如圖片渲染、網(wǎng)絡(luò)請求、模板加載等，showPage成功后前端回調(diào)show狀態(tài) → 客戶端仍為頁面已經(jīng)加載完成，處理加載完成后的邏輯，例如打點上報等

10、全局并沒有持有WKWebview不釋放，而是只要進(jìn)入文章頁就會預(yù)創(chuàng)建下次需要預(yù)熱的WKWebview，保證每次的WKWebview都是干凈無歷史痕跡，在dealloc方法中會釋放雙緩存池當(dāng)前加載的WebView。

其中initpage和showPage等都是前端處理相關(guān)邏輯回調(diào)給客戶端狀態(tài)，客戶端拿到狀態(tài)進(jìn)行下一步操作。

技術(shù)數(shù)據(jù)

秒開效果對比

低端機型:真機6P，12.4.5系統(tǒng)

優(yōu)化前線上UIWebview展示:

WKWebview展示:

WKWebView究竟好在哪里呢？

1. 內(nèi)存開銷更小
2. 內(nèi)置手勢
3. 支持更多H5特性
4. 有Safari相同的JavaScript引擎
5. 提供更多屬性，比如加載進(jìn)度、標(biāo)題、準(zhǔn)確的得到頁面數(shù)等等
6. 提供了更精細(xì)的加載流程回調(diào)（當(dāng)然相比UIWebView看起來也更麻煩一些，畢竟方法多了）

總結(jié)

到此這篇關(guān)于iOS WKWebView秒開方案的文章就介紹到這了,更多相關(guān)iOS WKWebView秒開內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論