初期学习开发uni-app项目,我们一般不会在意项目的性能问题,项目功能较少或者数据较少的时候,不会对项目性能的重要性有很大的感受。
但如果开发大型项目,或者数据量比较大的时候,项目性能的问题就显得尤为重要。一种需求的不同实现方式,页面的加载速度会差几倍甚至上百倍。
所以我们在开发项目之前,最好先了解一下项目性能优化的几种方式,在项目初期就打好基础,以免后期维护过于麻烦。
这节课我们主要讲解一些性能优化的小建议,在项目开发之前最好看一看,知道开发的重点需要注意哪些地方。
uni-app项目的视图层和逻辑层是分离开的,虽然我们在开发项目过程中,将html、js代码都写在同一个文件中,但是实际运行的时候是分离开的。
视图层负责进行页面渲染,也就是用户能看到的页面,用来展示数据的,包括页面结构代码部分、页面样式代码//thumbitem.vue将每个item包装成组件
//index.vue循环加载长列表
组件在页面初始化时会占用更多的内存,并且遍历节点也会更慢,每个组件渲染时都会触发一次通信,太多组件就会阻塞通信。所以我们要将好刀用在刀刃上,不分情况到处使用反而会适得其反。深层节点的嵌套也是同样的道理,我们开发的时候要注意尽量避免深层节点嵌套。
在实际项目开发中,长列表一般是由逻辑层处理后返回的,数据是变化的,如果长列表中的数据需要展示在页面上,那么我们就将长列表定义在data中,如果变量不需要展示在视图中,我们尽量将变量定于在data外部。
因为data中的数据每次发生变化,视图层都要重新渲染页面。这样做可以尽量避免资源的浪费,这条建议同样也适用于其他变量。
页面初始化时,逻辑层如果一次性向视图层传递很多数据,不仅会造成逻辑层和视图层之间的通讯变化,由于视图层一次渲染的数据过多,还会造成页面的卡顿。
所以如果数据过多,建议进行分页加载。比如:服务端要返回1000条数据,可以一次加载100条,500ms后再进行下一次加载。
上面我们提到过,逻辑层与视图层分离会造成一个缺点,就是两层之间通讯的损耗,如果两层之间频繁通信,可能会造成通讯阻塞,影响项目的正常运行,如果尽量避免两层之间的频繁通信呢?主要有以下几点:
因为nvue页面开发限制比较多,我们前面建议大家尽量不要使用nvue来开发项目,但是如果更加看重项目性能问题,可以使用nvue来代替vue。
因为nvue是基于weex的原生渲染,可以有效提高页面的流畅程度。如果对项目启动速度有更高的要求,如果项目支持的话,甚至可以将项目设置为纯nvue项目,这样整个应用都使用原生渲染,不加载webview框架,这样项目的启动速度会更快。
性能优化问题,在项目开发过程中,会变得越来越重要,最好在开发之前就了解各种优化性能的小技巧,这样后期开发也会更加得心应手一些。
本小节可以先浏览一遍项目开发中性能优化的这几个建议,大体记得哪些方面需要注意。等项目用到的时候,再来结合课程应用到实际项目中,这样也会理解的更加深刻。