什麼是 WebView 是手機中內置了一款高性能 內核瀏覽器,在 中封裝的一個組件。沒有提供地址欄和導航欄， 只是單純的展示一個網頁界面。在開發中經常都會用到。 ps: 關於 WebView 的介紹,可以看這裡 "《談談 WebView 的使用》" 雖說 WebView 是安卓開發中設計的東西,但是 ...
什麼是 WebView
WebView是手機中內置了一款高性能webkit內核瀏覽器,在SDK中封裝的一個組件。沒有提供地址欄和導航欄，WebView只是單純的展示一個網頁界面。在開發中經常都會用到。
ps: 關於 WebView 的介紹,可以看這裡 《談談 WebView 的使用》
雖說 WebView 是安卓開發中設計的東西,但是作為一個前端開發人員,關註一些相關的東西還是有必要的.
性能的問題
WebView 是原生 APP 開發中的底層 SDK ,必然有性能上的問題,最直觀的感受是比原生的要慢.
APP在打開一個頁面時,有以下的階段.
- WebView 初始化 ( 頁面無反應 )
- 建立連接,接收數據,數據初始化 ( 頁面無反應 -- 空白 )
- 頁面渲染,頁面 loading 中 ( 頁面 loading )
- 顯示頁面 ( 頁面展示 )
如圖:
WebView 初始化
APP 載入網頁與瀏覽器載入是有區別的,瀏覽器第一次打開,啟動的是瀏覽器內核,而 APP 首次載入網頁,首先是創建 WebView 實例.
分析
在
APP的WebView初始化期間,大致會分成以下的過程首次初始化: 客戶端冷啟動後,第一次打開
WebView,從開始創建WebView到開始建立網路連接.二次初始化: 在打開過
WebView後,退出WebView,再重新打開.
結論
作為前端開發工程師,統計頁面的打開時間,是以網路連接開始作為起點的.但是
WebView中用戶感受到的打開時間會多70~700ms.
之所以會有這樣的結果,原因在於:
- 在瀏覽器中，我們輸入地址時（甚至在之前），瀏覽器就可以開始載入頁面。
- 而在客戶端中，客戶端需要先花費時間初始化
WebView完成後，才開始載入。
而這段時間，由於 WebView 還不存在，所有後續的過程是完全阻塞的。
優化
由於這段過程發生在 native 的代碼中，單純靠前端代碼是無法優化的；大部分的方案都是前端和客戶端協作完成，以下是幾個業界採用過的方案。
全局 WebView
方法：
在客戶端剛啟動時，就初始化一個全局的
WebView待用，並隱藏；當用戶訪問了
WebView時，直接使用這個WebView載入對應網頁，並展示。
這種方法可以比較有效的減少 WebView 在 App 中的首次打開時間。當用戶訪問頁面時，不需要初始化 WebView 的時間。
當然這也帶來了一些問題，包括：
- 額外的記憶體消耗。
- 頁面間跳轉需要清空上一個頁面的痕跡，更容易記憶體泄露。
【參考東軟專利 - 載入網頁的方法及裝置 CN106250434A】
客戶端代理數據請求
方法：
- 在客戶端初始化
WebView的同時，直接由native開始網路請求數據； - 當頁面初始化完成後，向
native獲取其代理請求的數據。
此方法雖然不能減小 WebView 初始化時間，但數據請求和 WebView 初始化可以並行進行，總體的頁面載入時間就縮短了；縮短總體的頁面載入時間：
【參考騰訊分享：70%以上業務由H5開發，手機QQ Hybrid 的架構如何優化演進？】
還有其他各種優化的方式，不再一一列舉，總結起來都是圍繞兩點：
- 在使用前預先初始化好
WebView，從而減小耗時。 - 在初始化的同時，通過
Native來完成一些網路請求等過程，使得WebView初始化不是完全的阻塞後續過程。
WebView 性能優化總結
一個載入網頁的過程中，native 、網路、後端處理、CPU都會參與，各自都有必要的工作和依賴關係；讓他們相互並行處理而不是相互阻塞才可以讓網頁載入更快：
WebView初始化慢，可以在初始化同時先請求數據，讓後端和網路不要閑著。- 後端處理慢，可以讓伺服器分
trunk輸出，在後端計算的同時前端也載入網路靜態資源。 - 腳本執行慢，就讓腳本在最後運行，不阻塞頁面解析。
- 同時，合理的預載入、預緩存可以讓載入速度的瓶頸更小。
WebView初始化慢，就隨時初始化好一個WebView待用。DNS和鏈接慢，想辦法復用客戶端使用的功能變數名稱和鏈接。- 腳本執行慢，可以把框架代碼拆分出來，在請求頁面之前就執行好。
前端開發中需要瞭解的關於 WebView 的內容不需要太多,以上基本瞭解大致的一個過程我個人覺得就足夠了,當然關於 WebView 內容不止這些.
文章轉載自: 美團點評技術團隊 WebView性能、體驗分析與優化
