小程序页面性能如何

这篇文章主要介绍了小程序页面性能如何,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

评判小程序页面性能

由于小程序开发环境的特殊性,我们不能像普通网页那样通过chrome开发工具或者一些成熟的性能测试工具(例如灯塔)来了解一个页面的性能,但微信官方提供了一个性能评分的工具,点击这里可以查看工具详情。

体验评分是一项给小程序的体验好坏打分的功能,它会在小程序运行过程中实时检查,分析出一些可能导致体验不好的地方,并且定位出哪里有问题,以及给出一些优化建议。

后面我会以一个实际的例子来展示如何通过该工具来优化页面性能,我们先看下我们页面优化前的一个评分情况。

<人物>

我们的功能里面有个滚动到底部加载的功能,优化前我们的做法是这样的

& lt; !——只阐述逻辑,非真实代码——比;//1:祝福;初始一个列表,存储列表数据 　　data =startList//,2:,监听滚动事件,滚动到底部获取新数据,并追加到列表尾部,最后重新setData 　　onReachBottom:()=祝辞{ 　　,,,const {列表},=this.data 　　,,,fetchNewData () ((res)=祝辞{ 　　,,,,,,,list.push (res.list); 　　,,,,,,,this.setData({}列表) 　　,,,} 　　}

我估计大部分人面对长列表滚动的时候,一开始的处理方式都是这样的,如果数据不多,只有几页可能不会太暴露问题,如果页数过多,几十页甚至上百页的情况,列表的数据会越来越大,每次setData的数据就会越来越多,因而每次页面重新渲染的节点就会越来越多,从而导致滚动到后面,加载越来越慢。另外,由于小程序的视图渲染层和数据逻辑处理层是分开的,不是在同一个线程上面的,从用户触发页面交互,到处理数据逻辑,最后层现页面,数据到视图是需要传输的,因而小程序本身对数据大小也有限制,不能超过1米。

setData数据路径

怎么解决呢?小程序setData里面关键的支持数据路径的写法,比如

let  o =, obj; 　　this.setData ({, 　　& # 39;才能o。属性& # 39;:价值 　　}) 　　 　　或者let  a =,数组; 　　this.setData ({, 　　& # 39;才能阵列[0]。text # 39;:价值 　　})

<>强所以我们可以通过数据路径的写法,来将数据分批的传输到视图层中,减少一次性setData的数据大小强。具体写法如下

//,1。通过一个二维数组来存储数据let  feedList =,[[数组]];//2。维护一个页面变量值,加载完一次数据页+ + let  page =1//3。页面每次滚动到底部,通过数据路径更新数据 　　onReachBottom:()=祝辞{ 　　,,,fetchNewData () ((newVal)=祝辞{ 　　,,,,,,,this.setData ({ 　　,,,,,,,,,,,(& # 39;feedList [& # 39;, +, (page 安康;1),+,& # 39;]& # 39;]:,newVal, 　　,,,,,,,}) 　　,,,} 　　}//4。最终我们的数据是[[array1], [array2]]这样的格式,然后通过天气:为遍历渲染数据 存在短时间内发起太多图片请求(图片懒加载)

这个应该好理解,就是渲染页面时,一次性发送了过多的图片请求,导致了同一时间发起了过多的http请求,http连接是非常耗时的,尤其是一次性发起这么多,并且一次性发起的http链接也是有限制的,比如铬浏览器就限制一次性最多6个。

所以在渲染页面时,不在视图范围内的图片我们不加载,只有元素出现在视图范围内了,再渲染。

常规的做法是,通过<代码> getBoundingClientRect() 获取元素的位置,然后与页面滚动位置比较,如果出现在视图内,就将<代码> img> <李>

getBoundingClientRect()方法调用本身容易引起页面重排

<李>

监听滚动事件本身就频繁触发,虽然可以通过节流的方式来减少,但还是容易增加无谓代码处理

IntersectionObserver

其实,微信提供了

小程序页面性能如何