这篇文章主要介绍了小程序页面性能如何，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
成都创新互联专注于企业全网营销推广、网站重做改版、镇远网站定制设计、自适应品牌网站建设、HTML5、电子商务商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为镇远等各大城市提供网站开发制作服务。由于小程序开发环境的特殊性，我们不能像普通网页那样通过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里面的key支持数据路径的写法，比如
let o = obj;
this.setData({
'o.属性'：value
})
或者let a = array;
this.setData({
'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个。
所以在渲染页面时，不在视图范围内的图片我们不加载，只有元素出现在视图范围内了，再渲染。
常规的做法是，通过getBoundingClientRect()获取元素的位置，然后与页面滚动位置比较，如果出现在视图内，就将img显示。这种方式有2个问题
getBoundingClientRect()方法调用本身容易引起页面重排
监听滚动事件本身就频繁触发，虽然可以通过节流的方式来减少，但还是容易增加无谓代码处理
其实，微信提供了IntersectionObserver对象。
IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见
通过这个api我们不用再主动去监听元素位置了，在页面渲染一开始，通过这个api指明需要监听的元素，系统会自动去监听了元素位置。
