【延迟卡顿】uni-app APP视图更新相比起H5和小程序有明显延迟

分类：uni-app

uniapp App

我需要一个横向滑动选择的功能，因为逻辑复杂，涉及节点查询，我就把它封装成自定义组件了。

我承认这个操作会改变较多数据，触发需要繁琐的视图更新，客观上会存在一点延迟卡顿，但是200ms以内的延迟是可以接受的，2000ms以上的延迟是什么意思？

如果说是我写的代码有问题，那么为什么H5端和小程序端的延迟是正常的，而APP端的延迟就夸张到2s左右？

其实早在我写日历组件的时候就发现了APP端更新视图的延迟就比较厉害，明显长于小程序和H5，但是因为延迟在500ms以内，我就没有追究。

新的APP引擎采用什么视图层和逻辑层分离，但是从我使用的情况来看，只能应付简单的交互，一旦交互复杂起来，视图更新频繁起来，就开始掉链子了。说得再严重一点，现在的APP引擎各方面的表现还不如MUI时期的5 APP那种webView展示网页的简单解决方案。

我现在特别想知道这背后的原因是什么？我应该从那个方向进行优化？

效果视频在附件，如果需要附上代码，我后续会补充。

------------------------------------------------------------- 6.10 补充 ---------------------------------------------------------------------------------
新上传了复现代码在附件。

因为我每次都用这个项目复现bug，工程中还带有其他代码，其他的一些复现代码反映的问题已经修复或解决，这次复现问题的页面是/pages/appDataTest/appDataTest

由此可以看出当视图中的数据量较大时，APP的延迟情况相比其他两端严重的不止一点。

延迟表现视频.zip

uni-bug.zip

2020-06-09 18:35 负责人:无分享

2 个回复

DCloud_App_Array

请提供复现问题的示例应用

8***@qq.com (作者)

谢谢，我已经补充上传了附件，提供了复现应用。

2020-06-10 11:31

DCloud_UNI_FXY

优化点：
1.生成的节点太多了，你可以在h5上打印，点击切换的耗时，基本上都要几百毫秒，到了App端，你这个示例，大概有1.5-2倍，肯定会时间更长。
2.你的relativeList中的txt，依赖了selected变化，一旦selected变化，所有的txt都要改变
在App平台，selected改变时，同步的不是selected自己，而是所有的txt（该机制是为了兼容复杂的vue语法）

稍后，我们会在App平台，开放一些debug的日志，方便排查性能问题

relativeList1 () {  
      let list = []  
      for (let i = 0; i < CHILDREN_NUM; i++) {  
        //list.push({ txt: this.selected + '-' + i + '-1' })  
        list.push({ txt: i + '-1' })//移除了this.selected  
      }  
      return list  
    },  

    relativeList2 () {  
      let list = []  
      for (let i = 0; i < CHILDREN_NUM; i++) {  
        //list.push({ txt: this.selected + '-' + i + '-2' })  
        list.push({ txt: i + '-2' })//移除了this.selected  
      }  
      return list  
    }

8***@qq.com (作者)

感谢回复。

不能去掉selected，因为在真实的业务中，computed依赖的data只会比这个多而不是少，我之所以这么写，就是为了尽量还原出数据更新频繁，量大的场景下，APP端表现不尽人意的场景。

其实我想表达的重点在于为什么同样的代码，在H5和小程序中能比较流畅的运行，在APP中性能就不好。如果我把CHILDREN_NUM该为2000、3000，差距更明显。

当然我也不是说希望官方立即把问题解决到符合我的期望的程度，只是反馈这么一种情况，一方面希望能为日后产品优化提供参考，另外一方面我也希望能有机会弄清楚新的APP引擎的原理以及优化的经验。

2020-06-11 12:01
DCloud_UNI_FXY

回复 8***@qq.com: 上边提到一点，就是App端为了兼容更多的vue语法，逻辑层与视图层同步的数据，不是你原始的数据，而是根据你原始数据渲染出来的节点数据，你随便修改一个selected，可能会导致几千上万个节点数据变化，当节点不多的时候，性能影响不大，当节点多了的时候，就会出现性能问题，h5端不存在逻辑与视图层分离，小程序端的话，底层仅同步你的原始数据，比如你修改了selected，就仅同步selected，但这个方案会限制很多语法的使用，所以小程序端支持的vue语法，是少于App端的

2020-06-11 13:28
江月照我眠

回复 DCloud_UNI_FXY: 大佬，我做了一个调音器得页面，首先用小程序得写法写了，运行流畅，然后用uniapp的写法写，节奏就很乱了，然后我用h5+vue的方式写https://api.dayinjiaoyu.cn/index/metronome，发现和小程序一样流畅，我再用uniapp的webview打开这个h5，节奏又很乱，请问这是什么原因？

2020-08-21 10:40
江月照我眠

回复 DCloud_UNI_FXY: 我这里又2个问题，①uniapp原生写法下，用setInterval试过了，对createInnerAudioContext对象修改src和play两个操作耗时不稳定，播放节奏很乱，然后我用setTimeout去实现试过了，并用耗时差值去抹平，发现依然很乱。。。②没办法我只能用webview打开h5来试试了，没想到结果还是节奏混乱。我心态接近崩溃，不知道为什么会这样，请求大佬帮助！

2020-08-21 10:45

该问题目前已经被锁定, 无法添加新回复

【延迟卡顿】uni-app APP视图更新相比起H5和小程序有明显延迟

2 个回复

公告

相关问题

【延迟卡顿】uni-app APP视图更新相比起H5和小程序有明显延迟

与内容相关的链接

2 个回复

公告

相关问题