關(guān)于此問題的說明:

Android System WebView 內(nèi)核的bug：當(dāng)webview頁面中存在持續(xù)渲染(如跑馬燈效果。banner輪播等)。頁面被隱藏后會(huì)導(dǎo)致JS阻塞影響頁面渲染效率。從66.0.3359.126版本到最新都存在此問題。

注意：

此問題必須是頁面隱藏hide后，并且當(dāng)前頁面包含持續(xù)渲染(如跑馬燈效果。banner輪播等)時(shí)才會(huì)觸發(fā)此問題。如果你的頁面不會(huì)隱藏、沒有持續(xù)渲染邏輯可忽略此問題。

一般新窗體進(jìn)入蓋住老窗體，不會(huì)調(diào)用webview的hide方法，不會(huì)引發(fā)此問題。此問題常見于tabbar的切換，不同tab的webview頁面只有一個(gè)是顯示的，其他是hide的?；蛘唛_發(fā)者手動(dòng)調(diào)用了plus.webview對(duì)象的hide方法。

解決方案：

方案1： 我們推薦開發(fā)者在頁面被hide后，主動(dòng)停用持續(xù)操作ui的js或css。

在隱藏的頁面持續(xù)操作視圖本身也不合理，影響性能。

在uni-app中，基礎(chǔ)組件swiper和擴(kuò)展uni ui的跑馬燈，組件內(nèi)部會(huì)判斷，如果當(dāng)前頁面已經(jīng)不再前臺(tái)顯示，會(huì)停止輪播。所以正常使用這些組件也不會(huì)遇到問題。

如果開發(fā)者引用了未做判斷的三方組件，或者自己編寫了持續(xù)操作視圖的代碼，則應(yīng)該注意編寫判斷代碼，在頁面hide時(shí)，停止這些js或css。然后在恢復(fù)顯示時(shí)，重新啟用它們。

在uniapp中實(shí)現(xiàn)方案1的代碼

//組件內(nèi)監(jiān)聽webview隱藏停止動(dòng)畫(即將新增組件所在頁面的生命周期，可以監(jiān)聽頁面隱藏來停止動(dòng)畫)

mounted() {

// #ifdef APP-PLUS

const pages = getCurrentPages();

let currentWebview = pages[pages.length - 1].$getAppWebview();

currentWebview.addEventListener('hide', () => {

// webview隱藏，停止動(dòng)畫

})

currentWebview.addEventListener('show', () => {

// webview顯示，開啟動(dòng)畫

})

// #endif

},

//頁面內(nèi)監(jiān)聽頁面隱藏停止動(dòng)畫

onShow() {

// 頁面顯示，開啟動(dòng)畫

},

onHide() {

// 頁面隱藏，停止動(dòng)畫

}

方案2： 當(dāng)頁面被隱藏時(shí)主動(dòng)調(diào)用webview的pause方法，暫停這個(gè)webview里的所有js和css動(dòng)畫的運(yùn)行

首先需要升級(jí)HBuilderX 2.3.8或更高版本。(如發(fā)現(xiàn)版本沒更新請(qǐng)等待更新后再操作)

5+提供了新的API ，WebviewObject對(duì)象添加pause、resume方法。

void pause() 暫停Webview對(duì)象，停止js執(zhí)行、DOM渲染

void resume() 恢復(fù)Webview對(duì)象，恢復(fù)js執(zhí)行、DOM渲染

boolean isPause() 是否暫停，暫停則返回ture，否則返回false

uniapp用戶：

nvue頁面無此問題。忽略即可。

vue頁面：

在頁面存在持續(xù)渲染(如跑馬燈效果。banner輪播等)的情況下?？稍陧撁嬷芷趏nShow、onHide分別調(diào)用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對(duì)象控制管理方式規(guī)避問題。當(dāng)調(diào)用WebviewObject的show、hide方法時(shí)主動(dòng)調(diào)用相關(guān)頁面的pause、resume方法。

//創(chuàng)建頁面 此頁面包含持續(xù)渲染(如跑馬燈效果。banner輪播等)的邏輯存在。

var a = plus.webview.open('list.html','list');

//當(dāng)a頁面要隱藏時(shí)可調(diào)用如下代碼

var a = plus.webview.getWebviewById('list');

a.hide('none');

a.pause();

//當(dāng)a頁面顯示時(shí)調(diào)用如下代碼

var a = plus.webview.getWebviewById('list');

if(a.isPause()) {

a.resume();

}

總結(jié)

以上是生活随笔為你收集整理的android webview卡顿检测_Android webview隐藏后跳转新页面input输入卡顿与白屏渲染慢的问题说明及修复方案...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。