總結(jié)
1. webview初始化耗時(shí)優(yōu)化
1. webview提前加載（緩存池）
1. webview初始化會占用很大一部分時(shí)間，提前加載備用可以避免耗時(shí)
2. 注意點(diǎn)
1. webview重用時(shí)，頁面資源需要clear，例如需要清空history隊(duì)列、頁面內(nèi)容清空
2. 可能存在native堆棧多次push webview的情況。即頁面的push不是webview內(nèi)部加載HTML，而是通過native端push新的UIviewcontroller，加載新的webview。這種情況，會造成webview的大量出現(xiàn)，同時(shí)無法提前加載合適數(shù)量的webview。
2. webview與請求并行加載
1. request的請求需要依賴webview的初始化完成，避免等待webview初始化的時(shí)間，考慮并行加載
2. webview單獨(dú)加載，request通過網(wǎng)絡(luò)請求通道單獨(dú)請求，當(dāng)webview加載完成（或者request完成），加載請求結(jié)果到初始化完成的webview
2. 資源加載耗時(shí)優(yōu)化--加載離線資源
1. 基于NSURLProtocol的攔截加載本地資源
1. H5容器首先區(qū)分是UIWebview還是WKwebview
1. Apple已棄用UIWebview，APP內(nèi)部線程運(yùn)行，存在內(nèi)存問題，效率低，js交互性能差等劣勢，但可以完美使用NSURLProtocol
2. wkwebview是iOS8之后出現(xiàn)，但很多新功能會受限于iOS系統(tǒng)版本。性能優(yōu)于UIWebview，單獨(dú)進(jìn)程運(yùn)行，js交互方便。但NSURLProtocol的使用有很大問題
3. 綜上，只適用UIWebview
2. 針對wkwebview，無法使用nsurlprotocol，可以考慮自定義的schemehandle攔截
1. 只支持自定義scheme，無法對http、https、file使用
2. 版本要求，iOS11以上
3. 離線包技術(shù)
1. 基于本地路徑，加載本地H5頁面和資源
1. UIWebview的loadHTMLString:baseURL:
2. wkwebview的loadFileURL:allowingReadAccessToURL:
3. webview loadrequest時(shí)，根據(jù)url dispatch到本地資源路徑，加載本地離線資源
2. 若H5資源存在動態(tài)化可能，需要離線包版本管理邏輯，以及版本同步策略，自建服務(wù)端發(fā)布平臺
3. 可能問題：
1. 二向箔。本地相對路徑方式，所有靜態(tài)資源，都會產(chǎn)生離線化要求
2. 訪問本地資源還會導(dǎo)致資源路徑泄漏產(chǎn)生安全問題
3. 還會有一些瀏覽器的安全設(shè)置無法通過
4. 無法實(shí)現(xiàn)跨域資源請求，會讓前端開發(fā)人員無法訪問外部cdn（實(shí)測可以http://xxx/xxx.png方式后獲取到資源）
4. 模板加載
1. 針對某些新聞類頁面，樣式固定，數(shù)據(jù)內(nèi)容不同
2. 可以本地離線template HTML，請求新數(shù)據(jù)，本地重寫填充template，并加載顯示
3. 前端優(yōu)化
1. 服務(wù)端提前渲染，靜態(tài)直出
1. 頁面在服務(wù)器端拉取首屏數(shù)據(jù)后通過NodeJs進(jìn)行渲染，然后生成一個(gè)包含了首屏數(shù)據(jù)的Html文件
2. 首屏數(shù)據(jù)不用在客戶端執(zhí)行腳本加載處理，直接渲染HTML
2. 資源遷移到CDN，請求響應(yīng)加速
3. 頁面分離：HTML自定義增量標(biāo)簽，類似于模板加載
1. 首次加載template HTML，native端并行拉取最新數(shù)據(jù)，將增量標(biāo)簽替換成新數(shù)據(jù)，并刷新頁面
4. 業(yè)務(wù)邏輯優(yōu)化，減少js頁面邏輯耗時(shí)
4. 基于瀏覽器webview容器的優(yōu)化，設(shè)計(jì)webview底層加載優(yōu)化，Android上可能，參考UC團(tuán)隊(duì)https://www.infoq.cn/article/9UKos4Xh_6wL4Fh1FOGL
參考文章：
1. 幾種首屏提速策略簡述（推薦閱讀）
1. https://juejin.im/post/5cd4fda8f265da03a00febe1#heading-6
2. 離線包：通過獲取沙盒H5路徑直接加載
1. 步驟
1. 將所有的h5文件都放入一個(gè)文件夾中。
2. 將這個(gè)文件夾以相對路徑的方式倒入到工程代碼中。
3. 獲取本地的文件路徑。
2. 核心方法：
1. loadFileURL:allowingReadAccessToURL:
2. loadHTMLString:baseURL:
3. 可能問題：
1. 二向箔。本地相對路徑方式，所有靜態(tài)資源，都會產(chǎn)生離線化要求
2. 訪問本地資源還會導(dǎo)致資源路徑泄漏產(chǎn)生安全問題
3. 還會有一些瀏覽器的安全設(shè)置無法通過
4. 無法實(shí)現(xiàn)跨域資源請求，會讓前端開發(fā)人員無法訪問外部cdn（實(shí)測可以http://xxx/xxx.png方式后獲取到資源）
3. 基于NSURLProtocol進(jìn)行請求攔截（參考內(nèi)容圖2--百度Android攔截實(shí)現(xiàn)方案）
1. 攔截APP內(nèi)HTTP/HTTPS請求，返回本地緩存資源
2. 在UIWebview完美支持實(shí)現(xiàn)加載緩存，但wkwebview不支持
1. WKWebview與NSURLProtocol兼容問題https://www.zhihu.com/question/39434803
4. 基于WKURLSchemeHandler進(jìn)行自定義scheme注冊攔截
1. 只支持自定義scheme，無法對http、https、file使用
2. iOS11以上
5. 自建本地服務(wù)器加載本地資源
1. 實(shí)質(zhì)是：離線包技術(shù)+自建服務(wù)器攔截請求，具備兩種方案的優(yōu)點(diǎn)
2. 技術(shù)成本高
6. webview預(yù)加載，節(jié)省加載時(shí)間。
1. webview pool，實(shí)現(xiàn)webview的重復(fù)利用
2. 用完放回，需要清空webview，即重新加載空白頁
7. 結(jié)合native功能
1. 網(wǎng)絡(luò)請求、資源加載可考慮通過js調(diào)用native接口實(shí)現(xiàn)
1. 手機(jī)QQ優(yōu)化方案
1. VasSonic（https://mp.weixin.qq.com/s/5SASDtiBCHzoCN-YBZy1nA）
2. 靜態(tài)直出（服務(wù)端渲染）：為了優(yōu)化首屏體驗(yàn)，大部分主流的頁面都會在服務(wù)器端拉取首屏數(shù)據(jù)后通過NodeJs進(jìn)行渲染，然后生成一個(gè)包含了首屏數(shù)據(jù)的Html文件，這樣子展示首屏的時(shí)候，就可以解決內(nèi)容轉(zhuǎn)菊花的問題了。
3. 離線包：提前下載H5資源（HTML，js，image等），本地加載（loadFileURL:allowingReadAccessToURL:或loadHTMLString:baseURL:）
4. 并行加載：webview和資源并行加載，避免等待時(shí)間，見參考內(nèi)容圖一
5. 動態(tài)緩存：緩存已打開的HTML，通過NSURLProtocol攔截請求，本地直接返回（針對UIWebview）
6. 頁面分離：HTML增加自定義標(biāo)簽，增量更新標(biāo)簽內(nèi)容
2. 支付寶mpaas-nebula動態(tài)化方案
1. https://segmentfault.com/a/1190000017043584
2. 實(shí)質(zhì)是離線包技術(shù)
3. 特點(diǎn)是提供平臺級的一整套支持服務(wù)，從開發(fā)、測試到后期運(yùn)維提供多方保障
4. 虛擬域名，疑似自建本地服務(wù)器加載技術(shù)方案
5. fallback降級技術(shù)
3. UC 信息流正文“閃開”優(yōu)化實(shí)踐
1. https://www.infoq.cn/article/9UKos4Xh_6wL4Fh1FOGL
2. 極致優(yōu)化—>瀏覽器webview內(nèi)核優(yōu)化
3. UI 頁面 = F 模板 (Data 數(shù)據(jù))
1. 將模板和數(shù)據(jù)分拆，并盡可能保障在用戶觸達(dá)前獲取，然后根據(jù)場景選擇合適的組裝“地點(diǎn)”
注圖：
- H5加載流程
image.jpeg
初始化 webview -> 請求頁面 -> 下載數(shù)據(jù) -> 解析HTML -> 請求 js/css 資源 -> dom 渲染 -> 解析 JS 執(zhí)行 -> JS 請求數(shù)據(jù) -> 解析渲染 -> 下載渲染圖片
- 百度App安卓采用的請求攔截方式
image.jpeg
