webview预加载的技术原理和注意点

最新推荐文章于 2025-06-24 18:50:32 发布

yan_chenglong

最新推荐文章于 2025-06-24 18:50:32 发布

阅读量296

点赞数

CC 4.0 BY-SA版权

文章标签： android

原文链接：https://juejin.cn/post/7373937820179005478

此文章介绍webview预加载的技术原理和注意点

背景

网页优化，对网页的webview进行预加载，用户点开页面达到秒开效果

原理

即空间换时间，提前加载页面url

由于首页就有网页入口，所以需要在首页Activity进行预加载。

创建webview

WebView(MutableContextWrapper(context)，使用MutableContextWrapper替换Context，，方便后续复用时替换为webview容器Activity的上下文对象
WebSettings、原生方法初始化，保证预加载时功能正常，因为后续不会再进行loadUrl，必须保证h5页面正常显示
WebViewClient、WebChromeClient监听
- 重写onPageFinished、onReceivedTitle方法，主要为了title的接收，并且记录下来，后续webview复用时直接显示title
- 重写onReceivedSslError方法，避免证书错误加载显示失败
首页预加载容器Layout，置于最底层，宽度全屏，高度设置为全屏高度 - 顶部导航栏高度 - 状态栏高度

kotlin
 代码解读
复制代码
viewGroup.addView(WebView(MutableContextWrapper(context)).also { web ->  // 初始化webview 
}, ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT))

刷新逻辑，绑码状态或登录信息改变时，刷新已经预加载好的webview的url

复用webview

webview容器整改
- 判断是否需要使用已预加载的webview，如果需要复用，则根布局添加预加载webview进来，注意布局层级，避免覆盖了其他控件

kotlin
 代码解读
复制代码

	webView?.let { web ->
		(web.context as MutableContextWrapper).baseContext = activity
	}

	container.addView(it, 0, ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.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
链接：https://juejin.cn/post/7373937820179005478
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。