文：元芳
移動端載入網頁介紹
當我們載入一個網頁時，並不是傳送一個url請求所有的內容都下載下來了，而是除了主URL請求外，還有其他很多的請求，比如JS、CSS、圖片等檔案，每一個都是獨立的請求，部分請求還是序列的，需要將這些資原始檔下載完成後才能渲染 。
移動端使用WebVeiw載入現狀
移動端使用WebView影響使用者體驗，主要就是載入時間過長（發的請求比較多），造成顯示空白頁面過久，這就反應到下面webview載入的過程中-載入時間久長，主要包括以下三步：
- WebView的初始化
- 下載HTML並解析 c
- css、js資源的下載和渲染
如何減少這三大步驟中的耗時，成為了研究的重點。
WebView載入過程
以社群諮詢頁面為例在4G網路條件較好的情況下，隨機取五組資料，得下圖，html請求時間平均506ms,請求js、css 的時間783ms，這個不包括圖片請求的時間。
請求例子：比如我使用WebView載入了一個請求 https://h5plus.dewu.com/post?...
從chales抓包的請求瀑布流可以看到載入WebView的url時，先請求到html以後，通過解析，才去載入css、jss等一些資源，同時也可以看到載入一個WebView頁面，除了一個主HTML的URL以外，css、js的請求傳送了7個請求，這還是一個不太複雜的webview頁面，如果過於複雜，可想而知請求的數量。如何減少css、js請求也是H5端優化的方式之一。而對於客戶端而言，同樣通過提前把js、css一些資源放在本地，也可以優化WebView的載入速度。
WebView載入HTML方式
通過伺服器,以url的形式返回
這種也是傳統的載入方式，弊端就是網路不好的情況下，會出現較長時間的白屏，使用者體驗不好 。載入本地的html模板，通過本地注入內容的方式這種方式，是大多數公司研究的重點，可以實現WebView秒開，比如頭條的新聞詳情頁，適用於不太關注實時變化的頁面，幾乎感受不到白屏，能達到原生的體驗，原理就是提前把所需的js、css、html模板下載到本地，提前渲染好WebView，只需開啟時，客戶端注入內容資料即可，極大的提高了WebView的載入速度，這個也是本文研究的重點。 直接載入帶標籤的字串（以富文字的方式載入） 這中方案適用於簡單、純展示的UI介面，實現比價簡單，功能比較單一。
得物社群諮詢頁面現狀
目前社群諮詢專欄頁面，頁面上半部分使用的是WebView，下半部分是原生的評論頁面，載入WebView的方式也是傳統的通過url載入的方式，使用者體驗不是很好，平均開啟一個頁面需要2s左右，為了提升使用者體驗，減少WebView的載入耗時，對WebView的優化做了調研。
最終通過調研和方案對比，客戶端選用了調研了載入本地的html模板，通過注入內容的方式載入WebView頁面。
由於在社群諮詢頁面載入列表的時候，都已經拿到了渲染webview的內容資料，因此點選進入諮詢詳情頁的時候，其實內容資料也在本地了，相當於減少WebView傳送請求的個數，把 js、css的資料以及html模板提前放到本地，通過file協議，提前載入，當開啟WebView時，直接把內容注入本地HTML模板，極大節省了WebView請求和載入的時間。
最終的WebView載入請求示意圖如上圖所示，省去了中間html、css、js 請求的時間，通過載入離線本地的方式，大大提高了速度，本地載入html、css、js的時間可以忽略不計。
離線包下載邏輯：
無法複製載入中的內容
獲取注入的內容資料的方式：
- 如果列表已經有了內容資料，進入WebView無需再傳送請求，可以直接把內容資料注入本地的html模板
- 如果列表沒有內容資料，進入WebView根據不同的內容，請求不同的URL獲取內容資料，然後注入本地的html模板
最終以demo的形式使用chales模擬4G網路條件優化前後的對比效果如下：
優化前
?4G優化前諮詢專欄.mp4
優化後
?4G優化後諮詢專欄.mp4
優化前後的資料對比，就demo而言;
WebView載入到渲染結束的時間對比如下
由上圖資料可以明顯的看到，WebView從載入到渲染結束，提高幅度達到了98%左右，優化效果還是很明顯的。
接下來我們們再細化分WebView各個階段的請求時間：
css、js資源網路請求的時間
html網路請求時間
由於css、js還有html模板都可以以離線資源的形式，提前放在本地，所以請求資源的時間都可以省了，這樣的話，就會大大減少WebView載入過程中的時間。
並且圖片的載入時間也有明顯的提升，相關資料如下，這個提高幅度也是非常客觀的。
對於技術而言，優化無止境，一直在路上，目前還處於demo階段，下階段我們會按照方案實施，優先優化社群的諮詢專欄詳情頁，具體效果如何，大家拭目以待吧。