DCloud_Android_ST
DCloud_Android_ST
  • 发布:2019-11-01 12:13
  • 更新:2020-05-27 09:39
  • 阅读:8953

Android webview隐藏后跳转新页面input输入卡顿与白屏渲染慢的问题说明及修复方案

分类:uni-app

关于此问题的说明:

Android System WebView 内核的bug:当webview页面中存在持续渲染(如跑马灯效果。banner轮播等)。页面被隐藏后会导致JS阻塞影响页面渲染效率。从66.0.3359.126版本到最新都存在此问题。
** 注意:**

  • 此问题必须是页面隐藏hide后,并且当前页面包含持续渲染(如跑马灯效果。banner轮播等)时才会触发此问题。如果你的页面不会隐藏、没有持续渲染逻辑可忽略此问题。
  • 一般新窗体进入盖住老窗体,不会调用webview的hide方法,不会引发此问题。此问题常见于tabbar的切换,不同tab的webview页面只有一个是显示的,其他是hide的。或者开发者手动调用了plus.webview对象的hide方法。

解决方案:

方案1: 我们推荐开发者在页面被hide后,主动停用持续操作ui的js或css。
在隐藏的页面持续操作视图本身也不合理,影响性能。
在uni-app中,基础组件swiper和扩展uni ui的跑马灯,组件内部会判断,如果当前页面已经不再前台显示,会停止轮播。所以正常使用这些组件也不会遇到问题。
如果开发者引用了未做判断的三方组件,或者自己编写了持续操作视图的代码,则应该注意编写判断代码,在页面hide时,停止这些js或css。然后在恢复显示时,重新启用它们。

在uniapp中实现方案1的代码

//组件内监听webview隐藏停止动画(即将新增组件所在页面的生命周期,可以监听页面隐藏来停止动画)  
mounted() {  
  // #ifdef APP-PLUS  
  const pages = getCurrentPages();  
  let currentWebview = pages[pages.length - 1].$getAppWebview();  
  currentWebview.addEventListener('hide', () => {  
    // webview隐藏,停止动画  
  })  
  currentWebview.addEventListener('show', () => {  
    // webview显示,开启动画  
  })  
  // #endif  
},
//页面内监听页面隐藏停止动画  
onShow() {  
  // 页面显示,开启动画  
},  
onHide() {  
  // 页面隐藏,停止动画  
}

方案2: 当页面被隐藏时主动调用webview的pause方法,暂停这个webview里的所有js和css动画的运行
首先需要升级HBuilderX 2.3.8或更高版本。(如发现版本没更新请等待更新后再操作)
5+提供了新的API ,WebviewObject对象添加pause、resume方法。

  • void pause() 暂停Webview对象,停止js执行、DOM渲染
  • void resume() 恢复Webview对象,恢复js执行、DOM渲染
  • boolean isPause() 是否暂停,暂停则返回ture,否则返回false

uniapp用户:

nvue页面无此问题。忽略即可。
vue页面:
在页面存在持续渲染(如跑马灯效果。banner轮播等)的情况下。可在页面周期onShow、onHide分别调用webview的resume、pause方法即可

onShow() {  
	const w = this.$mp.page.$getAppWebview();  
	if(w.isPause()){  
		w.resume();  
	}  
},  
onHide() {  
	const w = this.$mp.page.$getAppWebview();  
	w.pause();  
},

5+用户:

可以通过WebviewObject对象控制管理方式规避问题。当调用WebviewObject的show、hide方法时主动调用相关页面的pause、resume方法。

//创建页面 此页面包含持续渲染(如跑马灯效果。banner轮播等)的逻辑存在。  
var a = plus.webview.open('list.html','list');  
//当a页面要隐藏时可调用如下代码  
var a = plus.webview.getWebviewById('list');  
a.hide('none');  
a.pause();  
  
//当a页面显示时调用如下代码  
var a = plus.webview.getWebviewById('list');  
if(a.isPause()) {  
   a.resume();  
}
5 关注 分享
DCloud_uniCloud_WYQ Nocker 飘过大山 skysowe 4***@qq.com

要回复文章请先登录注册

我嘞个去

我嘞个去

找到解决的方法了吗?有没有示例工程提供来参考一下
2020-05-27 09:39
我嘞个去

我嘞个去

回复 2***@qq.com :
我的版本是2.6.9的也很卡,输入框输的太快它会反弹输入的文字
2020-05-27 09:37
DCloud_Android_ST

DCloud_Android_ST (作者)

回复 1***@qq.com :
新开个ASK,问题描述清楚。版本信息等。然后附件工程实例。
2020-01-09 11:27
1***@qq.com

1***@qq.com

回复 DCloud_Android_ST :
安装基座运行的时候也不卡。。就云打包以后安装到手机特别卡
2020-01-09 08:48
1***@qq.com

1***@qq.com

回复 1***@qq.com :
安装基座运行的时候也不卡。。就云打包以后安装到手机特别卡
2020-01-09 08:47
1***@qq.com

1***@qq.com

回复 DCloud_Android_ST :
HX版本 2.5.1。工程实例怎么提供?以前写的项目不是 nvue的。用这个版本的HX打包以后也不卡。nvue的打包以后特别卡。求解决
2020-01-09 08:46
DCloud_Android_ST

DCloud_Android_ST (作者)

回复 1***@qq.com :
提供一下HX版本,工程示例。最好发一个ASK
2020-01-08 15:48
1***@qq.com

1***@qq.com

input输入卡的都输入不进去。。。键盘也切换不了 。。安卓app nvue编译模式
2020-01-08 15:09
2***@qq.com

2***@qq.com

我的版本是2.4.2输入框输入很卡。。。有其他方法解决吗,我就试了uni-app用户这个,还是卡。。。。
2019-12-07 17:22
Nocker

Nocker

回复 Nocker :
现阶段可以 css3动画的可使用animationPlayState:paused 暂停,轮播图可把自动切换手动 autoplay:false 解决此问题
2019-11-04 12:16