杨大宝
杨大宝
  • 发布:2020-05-08 17:01
  • 更新:2021-02-23 06:20
  • 阅读:1686

nvue渲染速度慢,速度肉眼可见

分类:nvue

nvue 页面的渲染由上至下肉眼可见的速度,非常影响用户体验。应该怎么解决呢?
具体见下图

2020-05-08 17:01 负责人:DCloud_UNI_HDX 分享
已邀请:

最佳回复

DCloud_heavensoft

DCloud_heavensoft

HBuilderX 3.0更新日志:

  • 【重要】App平台 新增 nvue 组件支持 render-whole 属性。可以按组件整体渲染,而不是从上到下逐行渲染 详情
swx

swx

感觉官方控不住这框架,每次更新都带出一批新bug,补了东墙又倒了西墙,让开发者很没安全感

  • DCMarvel

    不是控制不住,应该是功能太多需要兼容的太多,使用场景太复杂,应该是测试不过来

    2020-05-14 17:49

  • 627596279@qq.com

    确实官方已经掌控不了自己的框架了,nvue页面小问题太多而且一直没有见解决,感觉现在就是用新功能掩盖旧bug。非常希望官方能静下心来,哪怕一段时间不出新功能,专门解决以前的问题

    2020-05-22 00:40

  • 飞酒

    确实有点这方面问题,后面兼容小程序平台越多,成本更高,更难控制。可能flutter那种方式才是可控的,毕竟那么多游戏引擎走了这么多年的路了

    2020-06-19 10:11

  • 汉中李

    同意!就是控制不住来了,问题多多 all in one 想法不错 ,但是现实很残酷。还不如走分支模式至少可控

    2020-06-27 21:50

  • 汉中李

    很简单一个道理写那么多if else 不如分文件 可维护性和协作性是两回事

    2020-06-27 21:53

  • 娇娇_

    没安全感 说到我心里了

    4 天前

DCloud_Android_ST

DCloud_Android_ST

已收到会调研看下

杨大宝

杨大宝 (作者)

你好,非常感谢你的回复,我这边多种机型和系统版本都有测试,效果均和以上相似。nvue感觉和vue大不相同,vue打开页面时从入栈开始就已经渲染完了,入栈动画就能看出页面效果,nvue页面打开时先是空白然后逐层渲染,iOS基本没啥影响,仔细看才会有一点点这种感觉,安卓机特别明显,即使高端机也是一样只不过会快一些。

swx

swx

最近更新了版本后,也出现了楼主这情况,希望官方出版本前要严格测试。

  • DCloud_Android_ST

    有具体版本对比吗? 比如说2.6.16 比2.7.0渲染更快这种数据。别说更新了就变慢了这种话没有任何帮助

    2020-05-14 15:28

DCloud_UNI_HDX

DCloud_UNI_HDX

请提供Android系统版本及机型,请提供个简单工程

1606726660@qq.com
370293265@qq.com

370293265@qq.com

关注如何解决

chendong036@gmail.com

chendong036@gmail.com

这个问题很明显,这个有办法提升吗

lzy_lovesun@163.com

lzy_lovesun@163.com

这么问题和明显,我测试也存在这样的问题,

DCMarvel

DCMarvel

NVUE 与 VUE 页面渲染时机的确不一样.

873144328@qq.com
deng.qi.chang@qq.com

deng.qi.chang@qq.com - 喜乐的心,乃是良药。忧伤的灵,使骨枯干〃

是啊,现在nvue页面这样的渲染用户体验感很不好。期待官方解决。

汉中李

汉中李

希望官方能改善能少些很多代码
现在可以考虑延迟显示,渐显动画

675491258@qq.com

675491258@qq.com

确实渲染慢

雍渡人

雍渡人

不仅仅慢 如果你tab选项卡 按钮用的渐变背景没办法切换到对于的class的,搞了半天

664685021@qq.com

664685021@qq.com - 小明

nvue在低端机型上确实白屏严重

374141508@qq.com

374141508@qq.com

nvue 安卓有外部js引用会导致页面加载缓慢

515853152@qq.com

515853152@qq.com - APP开发

这种问题怎么解决的,是用uni.preloadPage吗

汉中李

汉中李

uni.preloadPage 不能解决所有问题 继续完善吧

DCMarvel

DCMarvel

uni.preloadPage 这东西是怎么想出来的?想着让开发者自己处理?

现在逻辑 点击NVUE页面-> NVUE页面入栈->触发显示动画->动画完成开始渲染节点->完成

(VUE页面 ->入栈动画渲染同时执行)

添加uni.preloadPage 之后

点击NVUE页面 -> 手动添加uni.preloadPage -> NVUE页面入栈->触发显示动画->动画完成开始渲染节点->完成

多了一步不必要的麻烦

正确的逻辑应该是框架自己处理

点击NVUE页面-> NVUE页面入栈 ->开始渲染节点 ->触发显示动画->动画完成->完成

如果有强烈需求的人 可以 重写uni.navigateTo 用H5+ 的webView(先在屏幕外显示渲染在动画显示)

汉中李

汉中李

点击NVUE页面-> NVUE页面入栈 ->开始渲染节点 ->触发显示动画->动画完成->完成
加一个业务逻辑完成手动关闭动画

Absorbed66c

Absorbed66c - 码农一枚

这是个巨坑 本来想改成nvue提升性能,改了后 渲染这么慢

Absorbed66c

Absorbed66c - 码农一枚

半年过去了。nvue渲染速度还是那么慢

  • 1101557853@qq.com

    赞同,nvue里面组件不能太多,不然太明显了,大多数情况下不如vue

    2020-12-10 08:49

1029197771@qq.com

1029197771@qq.com - 秋南

依然没啥变化,感觉要做优化啊,想搞app这块,就要重新弄一下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
有问

有问 - 生活,趣与失。

我觉得吧,UNI占手机配置和性能要求比H5要高一些,但H5的加载表现也并不好。不过我建议UNI全部使用VUE,放弃NVUE算了,把VUE搞好就很不错了。反正NVUE限制也多,不方便。

999

999

https://ext.dcloud.net.cn/plugin?id=3662 合理使用这个插件,可以改善情况。

要回复问题请先登录注册