开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 1416|回复: 0
收起左侧

[技术分享] uniapp性能优化建议

[复制链接]
发表于 2021-10-26 16:42:39 | 显示全部楼层 |阅读模式   广东省揭阳市

性能优化是每个项目都必须重视的,所以在使用uniapp中,将一些性能优化的点记录下来,在写代码的时候需要注意一下:

一、优化数据更新

  • ​​uni-app​​ 中,定义在 data 里面的数据每次变化时都会通知视图层重新渲染页面。所以如果不是视图所需要的变量,可以不定义在 data 中,可在外部定义变量或直接挂载在vue实例上,以避免造成资源浪费。

二、长列表优化

  • 1、长列表中如果每个item有一个点赞按钮,点击后点赞数字+1,此时点赞组件必须是一个单独引用的组件,才能做到差量数据更新,否则会造成整个列表数据重载。

  • 2、长列表中每个item并不一定需要做成组件,取决于你的业务中是否需要差量更新某一行item的数据,如没有此类需求则不应该引入大量组件。(点击item后背景变色,属于css调整,没有更新data数据和渲染,不涉及这个问题)

  • 3、单个组件中存在大量数据时(比如长列表),在App和小程序端数据更新时会消耗较多时间,建议使用组件对数据进行分页,将变更限制更小范围。可以参考:​ ​长列表优化示例​​

  我们看一下这个优化示例的核心思路:

  优化前:


// bad

<view>

  <my-item v-for="(item,index) in list" :key="index" :icon="item.icon" :title="item.title" :detail="item.detail"></my-item>

</view>

下面是优化后的核心内容:


// good

<view>

  <my-section v-for="(item,index) in section" :key="index" :begin="item.begin" :end="item.end"></my-section>

</view>

import mySection from './my-section.vue'

// my-section.vue

<view>

  <my-item v-for="(item,index) in list" :key="index" :icon="item.icon" :title="item.title" :detail="item.detail"></my-item>

</view>

created() {

  this.list = list.slice(this.begin, this.end)

}

  说一下其优化思路就是:将本来在一个组件内的数据,分布在多个组件内,避免一个组件内的数据量太大导致diff和同步到视图层耗时太多。

  比如一个组件内的100条数据,变成了10个组件内的10条数据,将变更限制了再10条一组的数据组件内。

  • 4、app端nvue的长列表应该使用list组件,有自动的渲染资源回收机制。vue页面使用页面滚动的性能,好于使用scroll-view的区域滚动。uni ui封装了uList组件,在app-nvue下使用了list组件,在其他环境使用页面滚动,自动适配,强烈推荐开发者使用,避免自己写的不好产生性能问题。

  • 5、如需要左右滑动的长列表,请在HBuilderX新建uni-app项目选新闻模板,那是一个标杆实现。自己用swiper和scroll-view做很容易引发性能问题

三、减少一次性渲染的节点数量

  • 页面初始化时,逻辑层如果一次性向视图层传递很大的数据,使视图层一次性渲染大量节点,可能造成通讯变慢、页面切换卡顿,所以建议以局部更新页面的方式渲染页面。如:服务端返回100条数据,可进行分批加载,一次加载50条,500ms 后进行下一次加载。

四、减少组件数量、减少节点嵌套层级

  • 深层嵌套的节点在页面初始化构建时往往需要更多的内存占用,并且在遍历节点时也会更慢些,所以建议减少深层的节点嵌套。

  • 有些nvue页面在Android低端机上初次渲染时,会看到从上到下的渲染过程,这往往都是因为组件过多导致的。每个组件渲染时都会触发一次通信,太多组件就会阻塞通信。

五、避免视图层和逻辑层频繁进行通讯

  • 减少 scroll-view 组件的 scroll 事件监听,当监听 scroll-view 的滚动事件时,视图层会频繁的向逻辑层发送数据;

  • 监听 scroll-view 组件的滚动事件时,不要实时的改变 scroll-top/scroll-left 属性,因为监听滚动时,视图层向逻辑层通讯,改变 scroll-top/scroll-left 时,逻辑层又向视图层通讯,这样就可能造成通讯卡顿。

  • 注意 onPageScroll 的使用,onPageScroll 进行监听时,视图层会频繁的向逻辑层发送数据;

  • 多使用css动画,而不是通过js的定时器操作界面做动画

  • 如需在canvas里做跟手操作,app端建议使用renderjs,小程序端建议使用web-view组件。web-view里的页面没有逻辑层和视图层分离的概念,自然也不会有通信折损。

六、优化页面切换动画

  • 页面初始化时若存在大量图片或原生组件渲染和大量数据通讯,会发生新页面渲染和窗体进入动画抢资源,造成页面切换卡顿、掉帧。建议延时100ms~300ms渲染图片或复杂原生组件,分批进行数据通讯,以减少一次性渲染的节点数量。

  • App端动画效果可以自定义。popin/popout的双窗体联动挤压动画效果对资源的消耗更大,如果动画期间页面里在执行耗时的js,可能会造成动画掉帧。此时可以使用消耗资源更小的动画效果,比如slide-in-right/slide-out-right。

  • App-nvue和H5,还支持页面预载,​ ​uni.preloadPage​​,可以提供更好的使用体验

七、优化背景色闪白

  • 1、如果是新页面进入时背景闪白

如果页面背景是深色,在vue页面中可能会发生新窗体刚开始动画时是灰白色背景,动画结束时才变为深色背景,造成闪屏。这是因为webview的背景生效太慢的问题。此时需将样式写在 ​​App.vue​​ 里,可以加速页面样式渲染速度。​​App.vue​​ 里面的样式是全局样式,每次新开页面会优先加载 ​​App.vue​​ 里面的样式,然后加载普通 vue 页面的样式。

  app端还可以在pages.json的页面的style里单独配置页面原生背景色,比如在globalStyle->style->app-plus->background下配置全局背景色


"style": {  

    "app-plus": {  

       "background":"#000000"

    }  

}

  另外nvue页面不存在此问题,也可以更改为nvue页面。

  • 2、如果是老页面消失时背景闪白

Android上popin动画时,老窗体会有一个半透明消失的效果。这个半透明效果的背景色,可以根据需要调节为暗色系。 在pages.json里globalStyle下或指定页面下,配置app-plus专属节点,然后配置animationAlphaBGColor属性。

八、使用nvue代替vue

  • 在 App 端 ​​uni-app​​ 的 nvue 页面可是基于weex升级改造的原生渲染引擎,实现了页面原生渲染能力、提高了页面流畅性。若对页面性能要求较高可以使用此方式开发,详见:​ ​nvue​​

九、优化启动速度

  • 1、工程代码越多,包括背景图和本地字体文件越大,对小程序启动速度有影响,应注意控制体积。组件引用的前景图不影响性能。app端在v3以前也存在和小程序一样的问题,但v3起解决了这个问题。

  • 2、App端的 splash 关闭有白屏检测机制,如果首页一直白屏或首页本身就是一个空的中转页面,可能会造成 splash 10秒才关闭,可参考此文解决​ ​https://ask.dcloud.net.cn/article/35565​​

  • 3、App端使用v3编译器,首页为nvue页面时,并设置为​ ​fast启动模式​​,此时App启动速度最快。

  • 4、App设置为纯nvue项目(manifest里设置app-plus下的renderer:"native"),这种项目的启动速度更快,2秒即可完成启动。因为它整个应用都使用原生渲染,不加载基于webview的那套框架。

十、优化包体积

  • 1、uni-app发行到小程序时,自带引擎只有几十K,主要是一个定制过的vue.js核心库。如果使用了es6转es5、css对齐的功能,可能会增大代码体积,可以配置这些编译功能是否开启。

  • 2、uni-app的H5端,自带了vue.js、vue-router及部分es6 polyfill库,这部分的体积gzip后只有92k,和web开发使用vue基本一致。而内置组件ui库(如picker、switch等)、小程序的对齐js api等,相当于一个完善的大型ui库。但大多数应用不会用到所有内置组件和API。由此uni-app提供了摇树优化机制,未摇树优化前的uni-app整体包体积约500k,服务器部署gzip后162k。开启摇树优化需在manifest配置,​ ​详情​​。

  • 3、uni-app的App端,因为自带了一个独立v8引擎和小程序框架,所以比HTML5Plus或mui等普通hybrid的App引擎体积要大。Android基础引擎约9M。App还提供了扩展模块,比如地图、蓝牙等,打包时如不需要这些模块,可以裁剪掉,以缩小发行包体积。在 manifest.json-App模块权限 里可以选择。

  • 4、App端支持如果选择纯nvue项目(manifest里设置app-plus下的renderer:"native"),包体积可以进一步减少2M左右。

  • 5、App端在HBuilderX 2.7后,App端下掉了非v3的编译模式,包体积下降了3M。

  • 6、uni-app的App-Android端有so库的概念,支持不同的cpu类型的so库越多,包越大。在HBuilderX 2.7以前,Android app默认包含arm32和x86两个cpu的支持so库。包体积比较大。如果你在意体积控制,可以在manifest里去掉x86 cpu的支持(manifest可视化界面-App其他设置里选择cpu),这可以减少包体积到9M。从HBuilderX 2.7起,默认不再包含x86,如有需求请自行在manifest里勾选后打包。一般手机都是arm的,涉及x86 cpu场景很少,包括:个别少见的Android pad、as的模拟器里选择x86类型。

评分

参与人数 1好评 +1 精币 +1 收起 理由
流灬星 + 1 + 1 新技能已get√

查看全部评分

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 793400750,邮箱:wp@125.la
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表