为什么要性能优化
uniapp项目的视图层和逻辑曾是分离开的;视图层负责进行页面渲染、逻辑层负责执行后端的业务逻辑,处理数据;视图层和逻辑层分离,减少了项目的耦合程度,并且逻辑层的运算不会影响到视图层的渲染,窗体动画会比较稳。
缺点:两层相互通信会有损耗
-
性能优化的建议
- 长列表优化
- 数据量过多导致项目加载会变得很慢可以使用 长列表差量数据更新 和 长列表无差量数据更新
- 长列表差量数据更新:如果长列表的数据有可能差量更新,则需要将长列表中的每个item都做成一个组件。不然其中一个item更新,都会造成长列表的重新加载,严重浪费系统资源
- 长列表的无差量数据更新:长列表的item不会单独去更新,就没有必要做成一个组件了,直接长列表循环显示item即可;组件在页面初始化时也会占用更多的内存,并且便利节点会更慢,每个组件渲染时都会触发一次通信,太多组件会阻塞通信;深层节点的嵌套也是如此,我们开发时要注意尽量避免深层嵌套。
- 减少一次性加载的节点数量
- 页面初始化时,逻辑层如果一次性向视图层传递很多数据,不仅会造成逻辑层和视图层之间的通讯变化,由于视图层一次渲染的数据过多,还会造成页面的卡顿
- 尽量避免两层的频繁通信
- 视图层和逻辑层频繁通信会造成通讯阻塞,影响项目的正常运行
- scroll-view组件的使用
- 尽量减少监听滚动事件,因为scroll-view的滚动事件时,视图层会频繁的向逻辑层发送数据
- 不要实时的改变scroll-top、scroll-left属性,可能造成通讯卡顿
- 如果要实现下拉刷新的功能,建议使用页面的滚动,而不是scroll-view
- 不要在scroll-view组件中放长列表,会导致性能问题
- 图片、动画加载问题
- 尽量使用压缩图片
- 尽量使用css动画,而不是使用js的定时器操作界面做动画
- 项目中不可避免的需要加载大量的动画和图片,建议加载时进行延时处理,分批进行大量数据通讯,提高页面的流畅性。否则会造成页面切换卡顿、掉帧等问题
- 使用nvue代替vue
- nvue限制太多,尽量不适用nvue来开发项目,但是看重新能问题,可以使用nvue来代替vue
- nvue时基于weex的原生渲染,可以有效提高页面的流畅度
- 尽量不要使用onPageScroll,
- o
nPageScroll
里不要写交互复杂的js,比如频繁修改页面。因为这个生命周期是在渲染层触发的,在非h5端,js是在逻辑层执行的,两层之间通信是有损耗的。如果在滚动过程中,频发触发两层之间的数据交换,可能会造成卡顿
- o
- 长列表优化