webview预加载的技术原理和注意点
此文章介绍webview预加载的技术原理和注意点
背景
网页优化，对网页的webview进行预加载，用户点开页面达到秒开效果
原理
即空间换时间，提前加载页面url
由于首页就有网页入口，所以需要在首页Activity进行预加载。
创建webview
WebView(MutableContextWrapper(context)，使用MutableContextWrapper替换Context，，方便后续复用时替换为webview容器Activity的上下文对象- WebSettings、原生方法初始化，保证预加载时功能正常，因为后续不会再进行loadUrl，必须保证h5页面正常显示
- WebViewClient、WebChromeClient监听
- 重写onPageFinished、onReceivedTitle方法，主要为了title的接收，并且记录下来，后续webview复用时直接显示title
- 重写onReceivedSslError方法，避免证书错误加载显示失败
- 首页预加载容器Layout，置于最底层，宽度全屏，高度设置为
全屏高度 - 顶部导航栏高度 - 状态栏高度
viewGr0up.addView(WebView(MutableContextWrapper(context)).also { web -> // 初始化webview
}, ViewGr0up.LayoutParams(ViewGr0up.LayoutParams.MATCH_PARENT, ViewGr0up.LayoutParams.MATCH_PARENT))
- 刷新逻辑，绑码状态或登录信息改变时，刷新已经预加载好的webview的url
复用webview
- webview容器整改
- 判断是否需要使用已预加载的webview，如果需要复用，则根布局添加预加载webview进来，注意布局层级，避免覆盖了其他控件
webView?.let { web ->
(web.context as MutableContextWrapper).baseContext = activity
}
container.addView(it, 0, ViewGr0up.LayoutParams(ViewGr0up.LayoutParams.MATCH_PARENT, ViewGr0up.LayoutParams.MATCH_PARENT))
- 原webview容器使用ViewStub代替，如果不需要复用则将ViewStub inflate，进行正常的h5页面加载
- 添加预加载webview后，直接显示，不需要loadUrl，但是白屏分析之类的逻辑别忘了手动调用
页面关闭
- webview跟随Activity一起进行销毁，但是需要通知首页重新生成一个webview，准备给下一次用户点击使用
- 首页关闭，页面栈清空时，需要清空单例中webview对象，并且调用destroy
- 不推荐回收webview继续使用，因为在实际测试中表现并不好，重建webview可以规避很多问题场景
如果用户点击比较快时，依然会看到加载过程和骨架屏
问题点和解决
- 复用webview时，页面视觉残留上一次h5页面状态
- 原因：页面关闭时，触发Activity的onStop方法，webview调用onPause，此时webview被暂停，webview的reload也不会立即刷新
- 解决：回收webview时，对webview重新恢复交互状态（onResume）
- 页面关闭，迅速点开，页面先显示上一次h5页面状态，然后开始reload
- 原因：当Activity反复打开关闭时，Activity的回收、对象GC会滞后，导致webview已经被复用并且上屏了，webview才开始触发reload
- 解决：webview不进行回收，每次页面关闭都进行销毁，重新创建webview
- webview多次reload后，网络请求失败
axios网络请求失败，response报文为空，暂未找到原因，了解的大佬麻烦解答一下，谢谢。当不回收webview后，此场景不存在了 - h5页面正常显示后，又刷新一次页面
- 原因：webview复用时，对webview重新进行初始化（重新创建原生能力、重置上下文对象等）时，会重新对UserAgent进行赋值，导致重新刷新了一次。
- 排查过程
发现网页骨架屏刚出现时点开不会重复刷新；骨架屏消失后点开也不会重复刷新；唯独骨架屏时，刚出现vConsole绿色块时点开会出现重复刷新。
对webview的shouldOverrideUrlLoading方法进行debug，发现并没有进入断点，说明并不是调用了reload，推测有什么逻辑导致网页重新刷新了一次。
随即用傻子办法，一段一段代码注释，发现友盟组件attach webview和通用webview容器设置userAgent的代码会导致重复刷新，难道友盟组件也有设置userAgent的代码？
然后查看友盟组件源码，不出所料，发现友盟组件中反射了setUserAgentString方法，并且对userAgent拼接了"Umeng4Aplus/1.0.0字符串，如下图所示。
那是否设置的userAgent有什么敏感字符串导致刷新？随即将userAgent只设置为空字符串，发现也会导致重复刷新。
到这里水落石处，但为什么userAgent发现变化会导致网页重复刷新？
询问前端大佬，回复没有监听userAgent，userAgent变化也不会做什么操作，故而没有得到具体答案，了解的大佬麻烦解答一下，感谢。 - 解决：webview复用时，不进行userAgent的重复赋值
- 复用webview时，页面白屏等待一会后秒开h5页面
- 原因：预加载时webview在1像素的layout中加载，复用到通用webview容器中，webview控件的布局已经结束，但需要时间对H5进行渲染，在重复打开关闭后或性能低下的手机表现更甚
- 解决：首页预加载webview时，已通用webview容器同大小进行布局
- 内存泄漏问题
- 原因：部分原生方法对象中对Activity和Fragment有强引用，当原生方法对象被addJavascriptInterface添加进webview时，复用的webview生命周期长如Application，就会强引用到Activity，导致无法回收，内存泄漏
- 解决：webview回收时清空Activity、Fragment的引用
- 不复用webview后此问题不存在了
作者：聪本尊18680
来源：juejin.cn/post/7373937820179005478
来源：juejin.cn/post/7373937820179005478
