背景:公司業(yè)務(wù)2B業(yè)務(wù)起步谈山,為了app能盡快上線冗锁,所以針對一些核心功能使用了H5編寫瓦盛。
問題:核心功能帶來 ---> 用戶高頻觸發(fā)。而H5從webview打開 到 H5 頁面展示出來棱貌,在ios iphone5 和 iphone6機(jī)型上打開緩慢。
webview性能
從用戶使用的過程箕肃,大致如下:
1.打開了一個新的窗口
2.頁面白屏
3.頁面基本骨架渲染出來婚脱,但是沒有數(shù)據(jù)
4.數(shù)據(jù)獲取完成,頁面整體渲染結(jié)束
慢的一部分原因:webview去加載url并不像是 瀏覽器 加載url的過程勺像,webview存在一個初始化的過程起惕。
過程如圖:
所以,webview加載url咏删,第一步并不是建立連接惹想,而是啟動瀏覽器內(nèi)核。
優(yōu)化思路
全局webview
app打開初始化一個全局的webview備用督函,并且將它隱藏嘀粱,所以對于用戶來講是無感知的激挪。但是這種做法也來帶額外的內(nèi)存開銷。但是有時候也是一種不錯的選擇锋叨。
為什么垄分?
業(yè)務(wù)場景舉例:app首頁banner點擊 ---->? 打開webview加載url ----> h5頁面點擊跳轉(zhuǎn)繼續(xù)打開一個webview去加載url。
所以娃磺,針對這種h5頁面并不是在同一個webview的交互薄湿,如果使用這種優(yōu)化手段是一個不錯的選擇。
因為app打開創(chuàng)建了全局的webview偷卧,所以接下來所有的webview打開的內(nèi)存消耗都只是二次打開帶來的內(nèi)存開銷豺瘤。
客戶端代理數(shù)據(jù)請求
1.在客戶端初始化webview的時候,直接由客戶端請求數(shù)據(jù)
2.頁面加載結(jié)束听诸,從客戶端讀取數(shù)據(jù)
個人對這種設(shè)計思維并不是很看好:
1.客戶端代理數(shù)據(jù)請求注定需要客戶端和H5通信 坐求,本來簡單的H5頁面就要使用jsbridge
2.jsbridge的初始化也是需要時間的
webview優(yōu)化,主要是圍繞兩點:
1.在使用前預(yù)先初始化好WebView晌梨,從而減小耗時桥嗤。
2.在初始化的同時,通過Native來完成一些網(wǎng)絡(luò)請求等過程仔蝌,使得WebView初始化不是完全的阻塞后續(xù)過程泛领。
ps:
參考自:https://tech.meituan.com/WebViewPerf.html