引言
????????現(xiàn)在很多科技公司都在如火如荼采用Weex或是Flutter等新技術(shù)來進(jìn)行混合開發(fā)。這些技術(shù)都是通過一種語言映射到原生（Android and iOS）的方式來提高用戶體驗，并且Weex還具有前端動態(tài)化部署的能力（Flutter還不支持） 庐舟。這無疑是現(xiàn)在移動混合開發(fā)的最優(yōu)解，但是也增加了新技術(shù)學(xué)習(xí)成本蛀恩、踩坑風(fēng)險及人力成本。
????????在手機性能越來越好及網(wǎng)絡(luò)（5g）越來越快的大潮流下，混合開發(fā)中最原始的留凭、最便捷的、最輕量級的采用WebView調(diào)用H5頁面重新受到青睞偎巢。對于一個小公司或是創(chuàng)業(yè)公司來說蔼夜，小步快跑、快速驗證压昼、人力控制和WebView的優(yōu)點不默而合求冷。
?????????WebView的原始弊疾一直被人詬病，一個字窍霞，慢遵倦。所以本文在研究了前人WebView加速技術(shù)的基礎(chǔ)上，提出一種快速提速首屏加載速度的方案官撼。
????????為了弄清楚到底慢在什么地方，首先來看一下在Android端加載WebView頁面的一般流程（iOS應(yīng)該也差不多似谁，可類比）傲绣。
1、Android 加載H5網(wǎng)頁一般流程
????????在深入研究了H5加載流程后巩踏，粗略畫了一個從打開網(wǎng)頁到顯示完全的流程圖秃诵。如下圖1.1所示。
? ? ? ? ? ?上圖1.1忽略了很多細(xì)節(jié)塞琼，比如請求頁面之前需要進(jìn)行網(wǎng)絡(luò)連接菠净、腳本js解析等技術(shù)細(xì)節(jié)，將注意力轉(zhuǎn)移到重要到流程節(jié)點上。本文將移動端加載H5頁面分為以下三個階段：
（1）WebView無響應(yīng)狀態(tài)
（2）白屏狀態(tài)
（3）加載狀態(tài)
????1.1?WebView無響應(yīng)狀態(tài)
? ? ? ? ?無響應(yīng)表示這時候WebView并沒有準(zhǔn)備好毅往，這時候是完全阻塞的狀態(tài)牵咙。WebView初始化是后續(xù)其他任何任務(wù)的前提。現(xiàn)在普遍認(rèn)為無響應(yīng)態(tài)即WebView是否初始化攀唯，但本文認(rèn)為在實際原生開發(fā)背景下洁桌，可將這一時間點提前到進(jìn)入頁面之前。
????1.1.1 進(jìn)入WebView頁面
? ? ? ? 本文的目的是研究如何提速WebView侯嘀，需要能將起始點盡量提前另凌。?Android通過Intent進(jìn)入一個頁面也是需要花費時間的，這個時間平均在30～60ms之間（實驗7.1）戒幔，如果有耗時的操作時間可能會更長吠谢。這個過程看似簡單但在實際開發(fā)中可能會包含一些耗時的操作，比如頁面初始化包含UI的初始化等等诗茎。
????1.1.2? WebView初始化
? ? ? ? WebView初始化即加載游覽器內(nèi)核工坊，這是和直接在游覽器打開一個H5頁面最大的不同。在App中打開一個H5頁面首先是要加載游覽器內(nèi)核错沃，尤其是第一次打開栅组。從美團(tuán)技術(shù)團(tuán)隊WebView性能、體驗分析與優(yōu)化一文可知這個時間消耗也在幾百毫秒之間枢析。再次打開Android系統(tǒng)會緩存WebView相關(guān)資源速度會比第一次要快玉掸。
????1.2、白屏狀態(tài)
? ? ? ? ?游覽器內(nèi)核初始化已完成醒叁，開始建立連接請求url對應(yīng)的主html頁面以及相關(guān)css樣式司浪，js資源，并開始邊加載邊渲染把沼，直到界面上開始出現(xiàn)內(nèi)容的這段時間啊易。
? ? ? ? ?這個時間通過人眼可不好計算，幸好W3c提供的navigation Timing交互性能監(jiān)測指標(biāo)可以幫助我們量化這個指標(biāo)參數(shù)饮睬。下面我們就來看一下這幅圖1.2(圖片來源網(wǎng)絡(luò))租谈。
具體文字定義說明（參考來自網(wǎng)上）：
navigationStart 加載起始時間
redirectStart 重定向開始時間
redirectEnd 重定向結(jié)束時間
fetchStart 瀏覽器發(fā)起資源請求時間
domainLookupStart 查詢DNS的開始時間
domainLookupEnd 查詢DNS的結(jié)束時間
connectStart 開始建立TCP請求的時間
secureConnectionStart? 如果在進(jìn)行TLS或SSL，則返回握手時間
connectEnd 完成TCP鏈接的時間
requestStart 發(fā)起請求的時間
responseStart 服務(wù)器開始響應(yīng)的時間
domLoading? 開始渲染dom的時間
domInteractive 未知
domContentLoadedEventStart 開始觸發(fā)DomContentLoadedEvent事件的時間
domContentLoadedEventEnd DomContentLoadedEvent事件結(jié)束的時間
domComplete dom渲染完成時間
loadEventStart 觸發(fā)load的時間捆愁，
loadEventEnd load事件執(zhí)行完的時間
? ? ? ? 從圖1.2游覽器加載網(wǎng)頁的時序圖中稍加整理得到性能指標(biāo)的重要參數(shù)割去，業(yè)界衡量移動web app交互性能的優(yōu)劣主要也是通過以下幾個性能指標(biāo)：
dns解析時間： domainLookupEnd - domainLookupStart
tcp建立連接時間： connectEnd - connectStart
白屏?xí)r間： responseStart - navigationStart
dom渲染完成時間： domContentLoadedEventEnd - navigationStart
頁面onload時間： loadEventEnd - navigationStart
? ? ? 而我們需要獲取的是白屏?xí)r間，可以通過上面的計算公式獲取昼丑。
????1.3呻逆、加載狀態(tài)
? ? ? ? 加載狀態(tài)是頁面已經(jīng)開始渲染，人眼已經(jīng)可見頁面輪廓和部分元素菩帝。從圖1.1可以看出咖城，加載狀態(tài)并不是等到整個html或是css茬腿、js等加載完成，而是加載到一部分就開始渲染宜雀，即邊加載邊渲染切平。頁面加載時間同樣可以通過W3c的navigation Timing獲取。
2州袒、WebView 加載H5頁面速度監(jiān)控
根據(jù)圖1.1將整個流程分成三個階段揭绑，主要監(jiān)控的三個重要指標(biāo)是：
????2.1 、WebView無響應(yīng)時間
????2.2郎哭、WebView白屏?xí)r間
????2.3 他匪、WebView加載時間
todo: 需要實驗數(shù)據(jù)支持，后續(xù)補上
3夸研、影響WebView加載速度的因素
????????影響WebView加載速度的因素有很多邦蜜，這就對相關(guān)性能監(jiān)控提出更高要求，需要統(tǒng)計多條求平均值亥至，且對比優(yōu)化要盡量排除以下因素影響悼沈。
現(xiàn)列表比較重點的因素供大家參考。
? ? ? 手機硬件（如1000塊錢手機和6000塊錢手機性能還是差別很大）
? ? ?游覽器內(nèi)核（如X5內(nèi)核）
? ? ?網(wǎng)絡(luò)姐扮、網(wǎng)絡(luò)絮供、網(wǎng)絡(luò)環(huán)境重要事情說三遍！（這個變量就非常之大）
? ? 前端代碼是否優(yōu)化（如雅虎14條）
? ?后端（如nginx部署是否開啟緩存和Gzip壓縮等）
? ? 茶敏。壤靶。。
4惊搏、業(yè)界主流的提速方案分析
????4.1贮乳、VasSonic
????????VasSonic是大廠騰訊出品，算是業(yè)界公認(rèn)的這方面綜合性最完整的一整套提速方案了恬惯。它用到了很多技術(shù)來幫助提速向拆，下面單列其中重要技術(shù)來簡單介紹下。
并行加載：將webview初始化和主url html請求分開
????????抽離出webview的代理類SonicSession,ui無關(guān)酪耳，從而可單開線程專門用來請求主html文件和緩存等相關(guān)工作浓恳。webview與SonicSession相互協(xié)作，從而實現(xiàn)并行處理縮短耗時碗暗。sonic框架的核心在于提供了一套webview與SonicSession通信協(xié)作機制來處理相互之間復(fù)雜的狀態(tài)流程颈将。比如webview是否初始化完成、主html流是否下載完成讹堤，是否需要調(diào)用緩存、數(shù)據(jù)下載完成而webview還是初始好怎么處理厨疙，初始化完成而數(shù)據(jù)還只下載一部分該如果處理都是sonic需要處理的主要關(guān)鍵節(jié)點洲守。
本地緩存：將請求的主url 獲得的html數(shù)據(jù)進(jìn)行本地緩存
局部刷新：
????????任何h5頁面理論上都可以抽象出一個模版疑务，分為不變的html 字符串和可變的html 字符串部分。sonic通過和前端的約定標(biāo)記分割出那些可變的塊的不變的字符塊梗醇，然后通過js與android交互通知原生局部刷新知允，缺點是需要前端支持。
????????sonic1.0版為了實現(xiàn)局部刷新需要后端支持叙谨，通過在主html請求頭部header增加自定義標(biāo)示sha1來決定是返回整個html或是動態(tài)部分温鸽。而在sonic2.0中不需要后端接入，后端返回整個html文件手负，端上（Android or Ios）根據(jù)與前端約定的標(biāo)簽分割為模版(不變)和非模版（變化）部分涤垫，然后與本地緩存比較來實現(xiàn)局部刷新還是整體刷新。
截流動態(tài)加載：
????????這種情況出現(xiàn)請求的主html流還沒有下載完成竟终，而webview已經(jīng)初始化完成蝠猬，這時候會中斷下載過程，將已經(jīng)下載的流和未下載的節(jié)點流包封裝成SonicSessionStream统捶。當(dāng)webview.load（url）時候通過webviewClient.shouldInerceptRequest將sonicSessionStream傳給webview榆芦。
模擬后臺（2.0新增）：
????4.2、CacheWebView
? ? ? ? CacheWebView是一種自定義的緩存策略喘鸟，主要是為解決緩存文件大小擴容匆绣。
????????Android WebView系統(tǒng)自帶緩存也即http協(xié)議緩存，是一種被動緩存什黑。緩存策略既不靈活崎淳，緩存空間大小是剩余空間的1/8。CacheWebView作者通過資源攔截的方式自定義一套緩存策略兑凿，并能自定義緩存空間的大小凯力，能支持100M以上的緩存空間。采用此方法同時也能在圖1.1中的白屏狀態(tài)和加載狀態(tài)兩個階段提速加載速度礼华。
5咐鹤、提速WebView可行性方案
? ? ? ? 本文在以上研究的基礎(chǔ)上，提出對圖1.1改造后的WebView加載方案圖5.1供大家參考圣絮。和圖1.1相比其核心思想是盡可能將整個串行動作變成并行來縮短時間祈惶。
整個WebView頁面加載過程中，可以將頁面（Activity）和WebView相分離扮匠；
WebView加載過程中也可以抽離出初始化過程和加載主url html的過程捧请。
邊加載邊渲染過程中也可通過自定義緩存策略加快渲染目的。
結(jié)合不同公司的情況棒搜，可選擇在以下幾個方面發(fā)力來實現(xiàn)快速提速方案疹蛉。
5.1、替換原生WebView為騰訊X5 WebView
? ? ? ? 騰訊X5屬于內(nèi)核級加速力麸，已對游覽器內(nèi)核深度定制和優(yōu)化可款。 它的優(yōu)點有很多育韩，比如下圖5.2是從其官網(wǎng)截取的一張圖片。相較于原生WebView它能提速30%闺鲸，節(jié)省流量20%筋讨，并還附帶其他比如：更安全、防http劫持摸恍、視頻播放優(yōu)化悉罕、文件預(yù)覽等功能支持。接入的成本相對來說不是很高立镶，只要接入或替換原生的Webview及相關(guān)類即可壁袄。Android手機只要安裝了微信或是qq 默認(rèn)都集成進(jìn)來了x5內(nèi)核，不需要客戶端額外下載谜慌。即使沒有集成x5內(nèi)核然想，也會先用原生WebView加載，sdk會在wifi情況下靜默下載欣范，下載完成下次加載切換到x5 WebView变泄。
優(yōu)點：內(nèi)核級加速恼琼、更省流量妨蛹、更安全及附帶其他功能。
缺點：由于是騰訊深度定制晴竞，不太靈活蛙卤。
5.2、預(yù)加載 WebView
? ? ? ? ?從美團(tuán)技術(shù)團(tuán)隊WebView性能噩死、體驗分析與優(yōu)化一文中可知颤难，WebView初始化過程需要消耗70~700ms不等的時間，假定取平均值200ms已维。如果能提高200ms行嗤，對于打開速度體驗要求很高的場景還是值得一試。
? ? ? ? ? 現(xiàn)在采用全局webview方案實施的并不多垛耳，本文猜測可能更多的考慮的是內(nèi)存消耗問題栅屏。假如App中采用H5混合開發(fā)較多，并且對部分H5頁面打開速度有極致要求堂鲜，還是可以考慮采用這種方案栈雳。比如App啟動初始化一個WebView實例池，初始化默認(rèn)只有一個WebView實例缔莲，當(dāng)打開一個H5頁面哥纫，從里面拿出一個實例，并相應(yīng)的在實例池中增加一個備用痴奏≈В總之始終保持WebView實例數(shù)比實際打開的H5頁面數(shù)多1奖慌。當(dāng)前端頁面銷毀的同時WebView實例響應(yīng)減1。
優(yōu)點：預(yù)加載時間點提前松靡，簡單粗暴
缺點：會有一定的內(nèi)存開銷，需要在用戶體驗和性能做很好的平衡建椰，
5.3 雕欺、預(yù)加載H5通用js、css及圖片等資源文件
? ? ? ? ?任何一個項目如果按照數(shù)據(jù)模型來分都可以分為靜態(tài)部分和動態(tài)部分棉姐。前端開發(fā)人員可以抽離出不常改動的資源文件如js屠列、css、image圖標(biāo)等伞矩。尤其用到的第三方j(luò)s庫笛洛，基本不會改動。
? ? ? ? ?將不常改動的js及css文件放置到App assets目錄中或是在app啟動時加載一個帶有通用資源模版的html頁面乃坤，將資源緩存到本地苛让。緩存可以借助系統(tǒng)自帶緩存或是通過資源攔截自定義緩存路徑和緩存策略。
優(yōu)點：加快頁面渲染速度
缺點：占有一定存儲空間湿诊，需要考慮緩存更新策略
5.4狱杰、并行加載url對應(yīng)的主html文件
????????在打開一個網(wǎng)頁的同時，通過新開線程獲取url對應(yīng)的html文件厅须，然后通過Android WebView提供loadDataWithBaseURL(html)來加載仿畸。sonic主要通過此方式來加快打開速度。
優(yōu)點：并行加載朗和，提高速度
缺點：需考慮主UI線程和加載url線程之間的通信問題错沽，復(fù)雜度增強
5.5、緩存html頁面中的css眶拉、js及圖片資源
????????可充分運行游覽器自帶的緩存千埃，但是系統(tǒng)緩存的空間有限，并且不能自定義緩存策略镀层。Android端可通過WebviewClient通過shouldInterceptRequest方法攔截資源請求镰禾，采用原生的主流網(wǎng)絡(luò)請求框架如okhttp3來請求，并自定義緩存策略和保存路徑唱逢。
5.6吴侦、服務(wù)端渲染（動態(tài)直出，需前端配合）
? ? ? ? 在現(xiàn)在前端Vue項目中坞古，已看不到顯示的內(nèi)容在直接在html標(biāo)簽里面备韧，取而代之的直接是一段js bundle。于是在游覽器渲染過程中痪枫，需要先將js bundle轉(zhuǎn)成html標(biāo)簽织堂，才能生成dom開始渲染叠艳。這個轉(zhuǎn)換過程需要花費時間。如果在這個轉(zhuǎn)換過程中有任務(wù)阻塞易阳，還會大大消耗大量時間附较，最直觀的就是很長的一段白屏出現(xiàn)。采用服務(wù)端渲染潦俺，后端幫轉(zhuǎn)換完成拒课，游覽器只是html標(biāo)簽dom渲染，會大大增快展示的速度事示。
6早像、實操流程圖
????????最后，本文給出一個可實際操作的方案流程圖供大家參考學(xué)習(xí)肖爵。
7卢鹦、優(yōu)化結(jié)果數(shù)據(jù)實驗（todo）
7.1? 進(jìn)入頁面需要花費的時間
7.2? WebView初始化需要花費的時間
7.3 無響應(yīng)狀態(tài)時間、白屏狀態(tài)時間以及加載狀態(tài)時間三個優(yōu)化因子的量化收集
7.3 替換X5 WebView 后加載速度對比
7.4 采用自定義緩存策略后加速前后對比
7.5 采用圖6.1整體優(yōu)化方案后前后對比
參考
1劝堪、Android Webview H5 秒開方案實現(xiàn)?
?https://juejin.im/post/5b94ca52e51d450e7d097f38?
2冀自、為什么你做的H5開屏那么慢？H5首屏秒開方案探討
?https://blog.csdn.net/w990997566/article/details/79373739
3秒啦、WebView性能凡纳、體驗分析與優(yōu)化
https://tech.meituan.com/2017/06/09/webviewperf.html
4、WebView 緩存機制 & 資源加載方案
http://www.reibang.com/p/5e7075f4875f
5帝蒿、CacheWebView
https://github.com/yale8848/CacheWebView
6荐糜、Android webview交互性能監(jiān)測指標(biāo)獲取方法
http://www.reibang.com/p/0f04db422b33
7、WebView性能葛超、體驗分析與優(yōu)化（美團(tuán)）
https://blog.csdn.net/yu280265067/article/details/73379145
8暴氏、Navigation Timing獲取頁面加載各個階段所需時間
http://www.reibang.com/p/0e3a851ed711
9、移動 H5 首屏秒開優(yōu)化方案探討
https://blog.cnbang.net/tech/3477
10绣张、騰訊祭出大招VasSonic答渔，讓你的H5頁面首屏秒開
https://mp.weixin.qq.com/s/5SASDtiBCHzoCN-YBZy1nA
