小程序性能优化的几点实践技巧
大家好,我叫张文轩,这是我的第6篇分享 我们都知道,性能的好坏直接影响用户的体验。本文首先论述下如何评判一个小程序页面的性能情况,之后通过具体的案例重点讲解下几点实践技巧,最后再讲讲key值在渲染一个列表时发挥了一个怎么样的作用,以此来论述为啥key值对性能提升有帮助。 评判小程序页面性能由于小程序开发环境的特殊性,我们不能像普通网页那样通过chrome开发工具或者一些成熟的性能测试工具(例如Lighthouse)来了解一个页面的性能,但微信官方提供了一个性能评分的工具,点击这里可以查看工具详情。 体验评分是一项给小程序的体验好坏打分的功能,它会在小程序运行过程中实时检查,分析出一些可能导致体验不好的地方,并且定位出哪里有问题,以及给出一些优化建议。 后面我会以一个实际的例子来展示如何通过该工具来优化页面性能,我们先看下我们页面优化前的一个评分情况。 存在setData的数据过大我们的功能里面有个滚动到底部加载的功能,优化前我们的做法是这样的 <!--只阐述逻辑,非真实代码-->
// 1: 初始一个list,存储列表数据
data = startList
// 2: 监听滚动事件,滚动到底部获取新数据,并追加到list尾部,最后重新setData
onReachBottom:()=>{
const {list} = this.data
fetchNewData().then((res)=>{
list.push(res.list);
this.setData({list})
}
}
复制代码
我估计大部分人面对长列表滚动的时候,一开始的处理方式都是这样的,如果数据不多,只有几页可能不会太暴露问题,如果页数过多,几十页甚至上百页的情况,list的数据会越来越大,每次setData的数据就会越来越多,因而每次页面重新渲染的节点就会越来越多,从而导致滚动到后面,加载越来越慢。另外,由于小程序的视图渲染层和数据逻辑处理层是分开的,不是在同一个线程上面的,从用户触发页面交互,到处理数据逻辑,最后层现页面,数据到视图是需要传输的,因而小程序本身对数据大小也有限制,不能超过1M。 setData数据路径怎么解决呢?小程序setData里面的key支持数据路径的写法,比如 let o = obj;
this.setData({
'o.属性':value
})
或者
let a = array;
'array[0].text':value
})
复制代码
所以我们可以通过数据路径的写法,来将数据分批的传输到视图层中,减少一次性setData的数据大小。具体写法如下 // 1.通过一个二维数组来存储数据
let feedList = [[array]];
// 2.维护一个页面变量值,加载完一次数据page++
let page = 1
// 3.页面每次滚动到底部,通过数据路径更新数据
onReachBottom:()=>{
fetchNewData().then((newVal)=>{
this.setData({
['feedList[' + (page - 1) + ']']: newVal,})
}
}
// 4.最终我们的数据是[[array1],[array2]]这样的格式,然后通过wx:for遍历渲染数据
复制代码
存在短时间内发起太多图片请求(图片懒加载)这个应该好理解,就是渲染页面时,一次性发送了过多的图片请求,导致了同一时间发起了过多的http请求,http连接是非常耗时的,尤其是一次性发起这么多,并且一次性发起的http链接也是有限制的,比如chrome浏览器就限制一次性最多6个。 所以在渲染页面时,不在视图范围内的图片我们不加载,只有元素出现在视图范围内了,再渲染。 常规的做法是,通过?
IntersectionObserver其实,微信提供了? IntersectionObserver 对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见 通过这个api我们不用再主动去监听元素位置了,在页面渲染一开始,通过这个api指明需要监听的元素,系统会自动去监听了元素位置。 intersectionRatio值大于0,说明元素出现在视图中了,重新setData数据,显示图片组件。
因而,在做list渲染时,如果list的顺序发生变化时,最好增加key,且不要简单的使用数组索引当做key。最后看看我们的成果: 体验码: 希望今天我的分享能对您优化小程序页面有一定的启示,创造出性能更好更流畅的页面。 最后如果喜欢我的文章,欢迎点击关注,我会不定期的分享自己的一些所看所想,和大家一起成长,持续学习。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |