网页优化之WebView预加载

前言

现在许多app都嵌入了H5页面，H5具有开发周期短、灵活性好的特点。但是WebView的性能问题却一直影响着用户体验。特别突出的就是加载速度慢和消耗流量。

在项目中，我做了一个测试，加载一个默认结果页所需时间（测试手机一加8）

在强网情况下，不考虑加载url所需的164ms情况下，Webview初始化及在loadUrl情况下初始化配置文件耗时448ms+365ms=813ms，即当我们第一次打开WebView时将近1s的时间在做初始化操作，这段时长足以让用户感知。

由于webview初始化时间过长，我们决定使用预加载的形式在应用打开时提前创建webview，以提高应用H5页面打开速度。

WebView预加载策略

1、首先我们需要创建一个webview，并将其改为静态全局调用，并以单例形式将其加入控制类

public class SearchResultCacheWebView {private static volatile SearchResultCacheWebView sSearchResultCacheWebView = null;public static final String MIDDLE_URL = ConstantUrl.SEARCH_NEWS_URL;private static final CommonWebView mCachedWebView = new CommonWebView(new MutableContextWrapper(BaseApplication.getContext()));private SearchResultCacheWebView() {}public static SearchResultCacheWebView getInstance() {if (sSearchResultCacheWebView == null) {synchronized (SearchResultCacheWebView.class) {if (sSearchResultCacheWebView == null) {sSearchResultCacheWebView = new SearchResultCacheWebView();mCachedWebView.setSetting(APPCommonUtil.getAgent());mCachedWebView.loadUrl(MIDDLE_URL);}}}return sSearchResultCacheWebView;}public CommonWebView getWebView(Context context) {// webView不为空，则开始使用预创建的WebView,并且替换ContextMutableContextWrapper contextWrapper = (MutableContextWrapper) mCachedWebView.getContext();contextWrapper.setBaseContext(context);return mCachedWebView;}}

2、在应用Application中创建webview

注意：Webview只能在主线程创建，并且除主进程外其他进程无需创建Webview

if (!TextUtils.isEmpty(processName) && processName.equals(getPackageName())) {//初始化webviewSearchResultCacheWebView.getInstance();//清楚H5 localStorage以解决H5记录筛选条件问题WebStorage.getInstance().deleteAllData();}

3、进入详情页时动态引入Webveiw并添加至布局中

//判断是否为搜索结果页，若是使用预加载webviewif (mSearchResultEnum != null) {CommonWebView cacheWebView = SearchResultCacheWebView.getInstance().getWebView(this);if (cacheWebView.getParent() == null) {mCommonWebView = cacheWebView;} else {mCommonWebView = new CommonWebView(this);}} else {mCommonWebView = new CommonWebView(this);}LinearLayout.LayoutParams webViewParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0);webViewParams.weight = 1;webViewParams.topMargin = StatusBarUtil.getStatusBarHeight(this);clSearch.addView(mCommonWebView, webViewParams);

通过这三步我们就实现了简单的webview预加载策略，将初始化webview操作在应用初期完成。

搜索主页预加载

完成了WebView的预加载策略后，我们将进一步的优化搜索结果页在弱网情况加载默认网页问题。

我们在许多浏览器应用中发现，搜索引擎的入口是我们最为常用的页面，而对入口网址的预加载需要我们与前端同学一起完成。

1、首先我们需要前端同学创建一个默认主页并与前端确认交互JS，做到调用本地以加载完成JS进行tab切换及查询

2、判断当前页面是否为搜索页，如果是，加载全局已经准备好的Webview，并调用js

以下为控制单元代码

public class SearchResultCacheWebView {private static volatile SearchResultCacheWebView sSearchResultCacheWebView = null;public static final String MIDDLE_URL = ConstantUrl.SEARCH_NEWS_URL;private static final CommonWebView mCachedWebView = new CommonWebView(new MutableContextWrapper(BaseApplication.getContext()));private SearchResultCacheWebView() {}public static SearchResultCacheWebView getInstance() {if (sSearchResultCacheWebView == null) {synchronized (SearchResultCacheWebView.class) {if (sSearchResultCacheWebView == null) {sSearchResultCacheWebView = new SearchResultCacheWebView();mCachedWebView.setSetting(APPCommonUtil.getAgent());mCachedWebView.loadUrl(MIDDLE_URL);}}}return sSearchResultCacheWebView;}public void reset() {if (mCachedWebView != null) {while (mCachedWebView.canGoBack()) {mCachedWebView.goBack();}boolean isSuccess = setTypeAndKey(BaseSearchResult.RESULT_NEWS, "");if (!isSuccess) {mCachedWebView.loadUrl(MIDDLE_URL);}}}public boolean isInitUrl() {WebBackForwardList list = mCachedWebView.copyBackForwardList();if (list != null && list.getSize() > 0) {int currentIndex = list.getCurrentIndex();WebHistoryItem backItem = list.getItemAtIndex(currentIndex - 1);if (backItem != null && backItem.getUrl().equals(SearchResultCacheWebView.MIDDLE_URL)) {mCachedWebView.goBack();return true;}}return false;}public boolean setTypeAndKey(BaseSearchResult result, String key) {if (mCachedWebView.getJsEngine() != null) {if (!TextUtils.isEmpty(mCachedWebView.getJsEngine().getSearchFunction())) {mCachedWebView.getJsEngine().postDataToJs(mCachedWebView.getJsEngine().getSearchFunction(), "{" + "\\\"keywords\\\"" + ":\\\"" + Uri.encode(Uri.encode(key))+ "\\\"," + "\\\"resultType\\\"" + ":" + BaseSearchResult.transToWebCode(result) + "}");return true;}}return false;}public CommonWebView getWebView(Context context) {// webView不为空，则开始使用预创建的WebView,并且替换ContextMutableContextWrapper contextWrapper = (MutableContextWrapper) mCachedWebView.getContext();contextWrapper.setBaseContext(context);return mCachedWebView;}}