nvue 页面的渲染由上至下肉眼可见的速度，非常影响用户体验。应该怎么解决呢？
具体见下图
杨大宝
- 发布：2020-05-08 17:01
- 更新：2024-08-29 18:13
- 阅读：7682
最佳回复
更新2024-8-29 nvue已经不再维护，需要高性能的App体验，请使用uni-app x。
以下为历史内容===========
如果是要解决从上到下渲染的问题：
HBuilderX 3.0更新日志：
- 【重要】App平台 新增 nvue 组件支持 render-whole 属性。可以按组件整体渲染，而不是从上到下逐行渲染 详情
关于nvue渲染需要注意，nvue虽然是原生渲染，但逻辑层在js里，那么js如果频繁向原生层动态写入渲染数据，就会发生跨进程阻塞。
请注意控制js向渲染层的写入的频次。比如：
- v-for渲染内容时注意次数，列表数据每页最好不超过20条。
- 减少组件的层次。
在react native、weex这类js引擎+原生渲染的技术上，这个问题就是这样了，框架层面很难优化，需要开发者写代码时注意。
官方已经推出了uni-app x，逻辑层和渲染层都在原生上，开发的应用和纯原生一样。
杨大宝 (作者)
你好，非常感谢你的回复，我这边多种机型和系统版本都有测试，效果均和以上相似。nvue感觉和vue大不相同，vue打开页面时从入栈开始就已经渲染完了，入栈动画就能看出页面效果，nvue页面打开时先是空白然后逐层渲染，iOS基本没啥影响，仔细看才会有一点点这种感觉，安卓机特别明显，即使高端机也是一样只不过会快一些。
有问 - 生活，趣与失。
我觉得吧，UNI占手机配置和性能要求比H5要高一些，但H5的加载表现也并不好。不过我建议UNI全部使用VUE，放弃NVUE算了，把VUE搞好就很不错了。反正NVUE限制也多，不方便。
杨大宝 (作者)
如果单纯的解决页面切换带来的问题的话可以参考一下方案。可以明显提升视觉感受。页面内的组件切换渲染建议使用swiper，这样的话也能有效提升用户体验。其他的实在没有很好的方案了，官方目前看来不再重视这块，不过看需求墙正在强化nvue的css写法，到时候可能会有明显的升级吧。
//预加载（仅安卓）增强用户体验
// #ifdef APP-PLUS
let preTimeOut = 0;
if (plus.os.name.toLowerCase() == "android") {
const navigateTo = uni.navigateTo;
uni.navigateTo = function(params) {
params.animationType = "slide-in-right";
params.animationDuration = 150;
uni.preloadPage({
url: params.url,
complete: () => {
clearTimeout(preTimeOut);
preTimeOut = setTimeout(function() {
navigateTo(params)
uni.unPreloadPage({
url: params.url
})
}, 200)
}
})
}
}
// #endif
本来想着切换到nvue 提升用户体验的,没想到做的过程中发现 页面渲染速度还没有vue快
-
-
回复 1***@qq.com: 那不会。除非是canvas这种nvue不支持的，否则渲染速度nvue是不会比vue慢的。不管vue还是nvue，都需要注意逻辑层和渲染层通讯损耗，减少在js里反复渲染页面数据。然后nvue动效要用bindingx，vue要用renderjs
2022-01-17 20:09
-
2年了，也没改善，，，，，，，，，，，
-
nvue的渲染用的就是手机操作系统的原生渲染，这块没啥可优化的。核心就是注意逻辑层和渲染层的通信，不要太频繁。如果逻辑层js不停更新界面，那会因为通信阻塞而导致视觉上渲染速度慢
2022-01-17 20:12
-
-
-
![[已删除]](https://img-cdn-tc.dcloud.net.cn/account/identicon/83260378ac6e59fee3cd28f60784ceea.png)
uni.preloadPage 这东西是怎么想出来的?想着让开发者自己处理?
现在逻辑 点击NVUE页面-> NVUE页面入栈->触发显示动画->动画完成开始渲染节点->完成
(VUE页面 ->入栈动画渲染同时执行)
添加uni.preloadPage 之后
点击NVUE页面 -> 手动添加uni.preloadPage -> NVUE页面入栈->触发显示动画->动画完成开始渲染节点->完成
多了一步不必要的麻烦
正确的逻辑应该是框架自己处理
点击NVUE页面-> NVUE页面入栈 ->开始渲染节点 ->触发显示动画->动画完成->完成
如果有强烈需求的人 可以 重写uni.navigateTo 用H5+ 的webView(先在屏幕外显示渲染在动画显示)
终于找到组织了,原来这么久的问题得不到解决,官方竟然说是自己代码问题,其实就很简单的列表更新,就会一个一个渲染出来,:render-whole="true" 真的是一点用处都没有,看着好烦,还不如开始就选vue,还说nvue快,哎呀我去,要是弄不好不要这么说嘛,现在都基于nvue了,都不好换vue了
秋云1
你这个只解决了第一次渲染的问题，如果更改了数据依然是这样子
2021-06-28 15:17
DCloud_IOS_XTY
回复 DCloud_IOS_XTY: 你的问题请提供个demo，我们好针对的性分析下问题原因
2021-06-28 18:26
秋云1
回复 DCloud_IOS_XTY: 我在https://ask.dcloud.net.cn/question/125993帖子中录了视频，每次修改了数据重新渲染cell的时候就会出现，原数据越长，新数据渲染的时间就越久
2021-06-29 08:32
DCloud_IOS_XTY
回复 秋云1: 需要提供下demo，需要看下页面和更新数据如何写的
2021-06-29 16:21
秋云1
回复 DCloud_IOS_XTY: 敢情你们自己做的东西自己都不用的吗？这问题还需要demo？随便写个超过20条的list更新数据都会出现，论坛提出这个问题的也不止一个，还跟我要demo？
2021-06-30 08:12
DCloud_IOS_XTY
就算是相似的问题也可能是不同的原因导致的，问你要demo一是为了分析问题，也是为了确认问题，我们要确保每个提出的问题都是验证过的
2021-06-30 09:45
DCloud_heavensoft
回复 秋云1: 我们受理的问题中，大部分是开发者代码的问题，请理解
2021-06-30 14:31
农业发展支持者
6月初了。uts 和uvue 发了吗
2023-06-05 15:01
9***@qq.com
render-whole。可以在整个页面上使用吗？必须用在nvue组件上吗？
2024-08-29 15:19