应用渲染异常问题分析及解决

举报
SHQ5785 发表于 2023/04/05 09:42:32 2023/04/05
【摘要】 一、前言继前期iOS由于移动设备内存不足导致页面白屏问题之后,(详参博文《跨平台应用开发进阶(五十)uni-app ios web-view嵌套H5项目白屏问题分析及解决》)又发现APP在iOS系统运行过程中,会高频出现页面黑屏、黑色区块,白屏问题。 二、问题分析出现以上问题是由于页面渲染问题导致的,引发的可能原因是页面栈溢出、应用内存泄漏。经过getCurrentPages()输出页面栈...

一、前言

继前期iOS由于移动设备内存不足导致页面白屏问题之后,(详参博文《跨平台应用开发进阶(五十)uni-app ios web-view嵌套H5项目白屏问题分析及解决》)又发现APP在iOS系统运行过程中,会高频出现页面黑屏、黑色区块,白屏问题。

在这里插入图片描述
在这里插入图片描述

二、问题分析

出现以上问题是由于页面渲染问题导致的,引发的可能原因是页面栈溢出、应用内存泄漏。

经过getCurrentPages()输出页面栈信息,发现切换底部导航时,页面栈信息已经清空,故不存在页面栈溢出问题。

继续尝试APP缓存清理机制,制定清理策略如下:

点击当前tabitem,滚动或刷新当前页面调用原生方法plus.cache.clear清理应用缓存。如果是点击不同的tabitem,一定会触发页面切换。

// 点击 tab 时触发
onTabItemTap (e) {
	// #ifdef APP-PLUS
	plus.cache.clear( function () {
		console.log( "Clear application cache successful!" );
	});
	// #endif
},

经过清理缓存策略的实施,问题得到解决。

由此,衍生出调用uni.setStorage(OBJECT)(宏任务)、uni.setStorageSync(KEY,DATA)(微任务)等API及uni.downloadFileuni.saveFile是存储至设备内存中吗?

三、延伸阅读

3.1 页面跳转

  • uni.navigateTo(OBJECT)
    会保留页面栈,能通过调用navigateBack返回。但是有页面栈溢出的问题,不能当作通用跳转方法。

  • uni.redirectTo(OBJECT)
    不会保留页面栈,不能返回上一页,返回默认pages.json第一个页面。

  • uni.reLaunch(OBJECT)
    销毁页面栈并跳转到指定页面。通常用于退出登录返回首页。

  • uni.switchTab(OBJECT)
    切换选项卡用。

  • uni.navigateBack(OBJECT)
    配合navigateTo,返回页面使用,能有效避免页面栈溢出。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

通过项目代码分析发现,路由跳转并不存在页面栈溢出异常情况。底部导航栏切换时,页面栈会做清空处理。同一导航栏下的页面跳转才会在页面栈中。

2 排查思路

  1. 根据具体业务场景,逻辑上控制页面跳转和返回,防止页面栈溢出。通过getCurrentPages()判断页面栈有多高;查看webview对象多少,来判断当前跳转方式是否合适。
  2. 排查代码逻辑,是否有长时间后台请求不返回的问题,可以在uni.request添加timeout来规避这种情况。
  3. 排查内存溢出,是否有创建定时器(setInterval),但是没清空的情况(clearInterval)。
  4. uniapp本身问题,因为其跨平台性需要js调用native,性能肯定会有所损失,如果无法接受还是使用原生语言开发。
  5. 删除缓存时,如果是清空数据需要使用uni.clearStorageSync

那就需要查看应用运行过程中占用的内存了,是否存在内存泄漏问题。

3.2 $nextTick原理深度解析

Vue 实现响应式并不是数据发⽣变化之后 DOM ⽴即变化,⽽是按⼀定的策略进⾏ DOM 更新。$nextTick 是在下次 DOM 更新循环结束之后执⾏延迟回调,在修改数据之后使⽤ $nextTick,则可以在回调中获取更新后的 DOM,在下次 DOM 更新循环结束之后执行延迟回调。

简单的理解是:当数据更新了,在dom中渲染后,⾃动执⾏该函数。Vue在更新data之后并不会立即更新DOM上的数据,就是说如果我们修改了data中的数据,再马上获取DOM上的值,我们取得的是旧值,我们把获取DOM上值的操作放进$nextTick里,就可以得到更新后得数据。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

正确的⽤法是:vue改变data中的数据后,使⽤vue.$nextTick()⽅法包裹js对象执行后续代码。

在这里插入图片描述
在这里插入图片描述

3.2.1 什么时候使用$nextTick()

Vue⽣命周期的created()钩⼦函数进⾏的DOM操作⼀定要放在Vue.nextTick()的回调函数中,原因是在created()钩⼦函数执⾏的时候,DOM 其实并未进⾏任何渲染,⽽此时进⾏DOM操作⽆异于徒劳,所以此处⼀定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

当项⽬中改变data函数的数据,想基于新的dom做点什么,对新DOM⼀系列的js操作都需要放进Vue.nextTick()的回调函数中。

3.2.2 $nextTick() 执行原理

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个任务队列,并缓冲在同一时间循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。(这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的)

然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行任务队列 (已去重的) 工作。

Vue 在内部对异步队列尝试使用原生的 Promise.then(微任务)、MutationObserversetImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0)(宏任务)代替。

3.3 JS 运行机制

JS 执行是单线程的,它是基于事件循环的。事件循环大致分为以下几个步骤:

  1. 所有同步任务都在主线程上执行,形成一个执行栈
  2. 主线程之外,还存在一个"任务队列"(task queue)。
  3. 只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
  4. 一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。主线程不断重复上面的第三步。

在这里插入图片描述

主线程的执行过程就是一个 tick,而所有的异步结果都是通过 “任务队列” 来调度。"任务队列"中存放的是一个个的任务(task)。规范中规定 task 分为两大类,宏任务微任务

在这里插入图片描述

3.3.1 微任务

也称job,通常用于在当前正在执行的脚本之后直接发生的事情,比如对一系列的行为做出反应,或者做出一些异步的任务,而不需要新建一个全新的task。只要执行栈没有其他javascript在执行,在每个task结束时,微任务队列就会在回调后处理。在微任务期间排队的其他微任务将被添加到这个队列的末尾。

常见的微任务 有 MutationObseverPromise.then$nextTiock

3.3.2 宏任务

宏任务的作用是为了让浏览器能够从内部获取javascript / dom的内容并确保执行栈能够顺序进行。调度是随处可见的,例如解析HTML,获得鼠标点击的事件回调等等。

常见的宏任务有 setTimeoutMessageChannelpostMessagesetImmediate

vue进行DOM更新,内部也是调用nextTick来做异步队列控制。而当我们自己调用nextTick的时候,它就在更新DOM的那个micro task后追加了我们自己的回调函数,从而确保我们的代码在DOM更新后执行。

setTimeout是宏任务:只是延迟执行,在延迟执行的方法里,DOM有可能会更新也有可能没有更新。

三、解决措施

注⚠️:

  • uni-app App 端内置 HTML5+ 引擎,让 js 可以直接调用丰富的原生能力。

    条件编译调用 HTML5+:小程序及 H5 等平台是没有 HTML5+ 扩展规范的,因此在 uni-app 调用 HTML5+ 的扩展规范时,需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。

    // #ifdef APP-PLUS
    var appid = plus.runtime.appid;
    console.log('应用的 appid 为:' + appid);
    // #endif
    
  • uni-app 逻辑层是运行在一个独立的jscore里的,它不依赖于本机的webview,所以一方面它没有浏览器兼容问题,可以在Android4.4上跑es6代码,另一方面,它无法运行window、document、navigator、localstorage等浏览器专用的js API。

    jscore就是一个标准js引擎,标准js是可以正常运行的,比如if、for、各种字符串、日期处理等。js和浏览器的区别要注意区分开来。

  • uni-app 的App端没有App那种webkit remote debug,因为uni-app的js不是运行在webview里,而是独立的jscore里。

  • 由于浏览器 GUI 渲染线程JS 引擎线程是互斥的关系,JS引擎执行时,会将GUI线程挂起,直到JS引擎执行结束。当页面中有很多长任务时,就会造成页面 UI 阻塞,出现界面卡顿、掉帧等情况。

GUI渲染线程:负责页面的绘制和渲染,我们所熟知的html、css资源的解析、dom树的生成、页面绘制都是该线程负责的。
JS引擎线程:负责js的解析以及所有异步同步任务的执行,维护一个执行栈,先逐个处理同步代码,当遇到异步任务时,就会借助事件触发线程。

浏览器的进程、线程信息如下:
在这里插入图片描述
其中,前端主要关注的是浏览器内核的渲染进程,其主要负责html、css、js资源解析渲染,还负责事件循环、异步请求等。

数据存储:uni-app中的缓存、H5缓存是存储在内存吗?

  • 原生plus Storage模块管理应用本地数据存储区,用于应用数据的保存和读取。应用本地数据与localStoragesessionStorage的区别在于数据有效域不同,前者可在应用内跨域操作,数据存储期是持久化的,并且没有容量限制。通过plus.storage可获取应用本地数据管理对象。

  • uni-app应用uni.setStorage(OBJECT)(宏任务)、uni.setStorageSync(KEY,DATA)(微任务)进行数据存储时,其本质是使用原生plus.storage,无大小限制,不是缓存,是将数据存储至sqlite数据库文件进行持久化。

  • App端还支持SQLiteIO文件等本地存储方案。

  • H5端应用localStoragesessionStorage进行数据存储,浏览器限制5M大小,是缓存概念,可能会被清理。

  • 应用Vuex实现状态管理。

  • 原生plus.cache管理应用缓存数据仅包括程序中使用webview产生的数据,不包括业务逻辑中使用扩展api(例如uni.setStorage(OBJECT)(宏任务)、uni.setStorageSync(KEY,DATA)(微任务)等API)保存的数据。

  • 各个小程序端为其自带的storage api,数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。

  • uni-app框架组件本身无法解决的问题,可抛弃框架组件,使用原生进行优化。

最终是选择在切换底部页签时做缓存清理动作,注意此处的缓存清理使用plus.cache.clear实现清除应用的缓存数据。清理应用缓存数据仅包括程序中使用webview产生的数据,不包括业务逻辑中使用扩展api保存的数据。代码如下:

// 点击 tab 时触发
onTabItemTap (e) {
	console.log('-----------点击 tab 时触发-----------', e);
	// #ifdef APP-PLUS
	plus.cache.clear( function () {
		console.log( "component Clear application cache successful!" );
	});
	// #endif
},

四、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。