用uni-app写了个小应用,发现两个tabbar页面切换时卡顿特别严重,我以为是渲染问题,经过我多次的排查才发现原来并不是。
然后自己写了个测试项目进行测试,测试项目由两个页面组成,并且将两个页面都添加为tabbar,页面1的代码如下
onShow() {
this.test()
},
methods: {
test(){
console.log("开始执行test")
var start = new Date().valueOf()
var arr = []
for(var i=0;i<100000;i++){
var arrIn = []
for (var j=0;j<1000;j++) {
arrIn.push(j)
}
arr.push(arr)
}
var end = new Date().valueOf()
console.log("执行完毕,耗时:"+(end-start)+"毫秒")
}
}
页面2 为新建页面
本次测试发现两个问题:
1、app的js执行速度非常非常非常慢,将项目运行到我的手机(华为 mate 20),test方法平均耗时为5000毫秒左右
2、在app中必须执行完onShow中的代码后页面才会显示(也就是打印完 执行完毕,耗时:xxx毫秒 之后才会显示页面)
然后我又将代码运行到小程序和浏览器(这两个基本没啥区别)
耗时都是500毫秒左右,比app快了10倍!!!而且两个页面直接切换无任何卡顿!!! 我的天呐!为啥app更加垃圾?
我以为,可能是js执行速度较快所以两个页面切换无卡顿,然后我将j<1000改为j<10000,发现app直接卡死了,顿时一口老血卡住了喉咙,尼玛。。。这么坑爹!
我又分别运行到小程序和浏览器(这两个都没啥区别)
两个页面切换还是无任何卡顿,而且切换后才会执行onShow中的代码(打印 开始执行test),然后test的执行耗时平均5000毫秒左右
为啥都是5000毫秒,小程序和浏览器都能先切换再执行onShow中的代码,而app却是先执行onShow中的代码再显示页面?
然后我觉得我应该可以挣扎一下,把onshow中执行的代码放到setTimeout,发现从页面2切换到页面1也是瞬间切换,
我以为没问题了,然而。。。。变成了从页面1切出卡顿了,也就是如果要从页面1切出必须要页面1中的js全部执行完毕(包括onload和onshow)才能切换到其他的tabbar页面(其它普通页面没测试过),沃日勒,坑啊啊啊啊!
跪求官方的产品经理能提一下这个问题(app问题)
1、js执行速度慢
2、页面先执行完js才会切入(显示本页面)和切出(显示别的页面)
测试项目已上传到附件!