微信小程序长列表 性能优化+侧边栏快速搜索

微信小程序长列表 性能优化+侧边栏快速搜索

近几日在做小程序性能优化，受益良多，总结一下。

一、长列表性能优化

无论是小程序还是h5 长列表性能优化都在于两个2方面

1. 加载性能优化 ：提升每页加载速度；
2. 减少同时渲染出的DOM元素、DOM层级、页面渲染次数 ：提升渲染效率，减少卡顿；

1.加载性能优化

小程序中加载优化主要在于 wx.setData()的使用。

setData()优化在于不要每次都直接set整个List，而是在需要对list进行操作的时候，单独添加、修改对应的元素。

优化前：

getList(page){
      getlist({page:page}).then(res=>{
      this.setData({list:this.data.list.push(res)});
    })
  },

优化后：

  getList(){
    getlist({page:page}).then(res=>{
      this.setData({['list['+page-1+']']:{list:res,index:page-1}});
    })
  },

可以看到优化后，每次仅set 新增数据，而不是对整个List，然后一股脑重新setData();
wxml也需要对应调整循环渲染结构。

<blcok wx:for="{
  {list}}" wx:key="index1" wx:for-item="list" >
    <block  wx:for="{
  {list.list}}" wx:key="index2" >
    ...
    </block>
</block>

可以看到，数据由一维数组，变成了二维数组，更贴合分页的逻辑。

除了对setData()优化外，还可以考虑对整个list做一个缓存处理，每次先从缓存取，然后再静默更新页面数据和缓存数据。

2.渲染优化

1. 减少渲染层级：尽量缩小view层级、能一层实现就不要写2层。
2. 减少需要渲染的元素个数： wx:for 循环渲染的过程中，如果该层级不需要渲染出来，仅仅只是一个盒子容器，需要使用block元素，这样就不会被渲染出来，提升渲染速度。
3. 隐藏可视区域外的元素

关于第三点，要如何隐藏可视区域外呢。

查看小程序api 发现了wx.createInt