wepy小程序长列表性能优化实践

背景

• wepy 1.7.3
• wepy-redux

长列表交互问题

wepy框架的列表性性能比较差，主要缘由是修改列表中任意字段的时候，会给 setData传递完整的列表，详细见这个 issue；

此时修改长列表任意字段，都会致使页面长时间不响应

解决

使用字典( Object)与长列表进行组合，由于通常状况下字典的数据量会远远小于列表

场景

任意弹窗对购物车 cart进行修改，产品列表对应的购买数量同步修改

// 数据结构

// 产品列表(长度3000+)
var products = [{id: "79", name: "精致荤菜"}...]

// 购物车字典 
// key: productId, value: 购物车数据
var cartDict = {
    2407: {
        price: "1.02"
        num: 2
    }
}

注意因为cartDict数据为用户手动添加，数据量远远小于列表。那么setData时速度也会相应提升

此时咱们使用组合方式渲染列表的购买量

<view class="num" wx:if="{{ cartDict[product.id] }}">{{cartDict[product.id].num}}</view>

经过将每次修改列表转移为每次修改cartDict来达到提高性能的效果；上面那个issue也能够用相似思路制做一个展开产品的字典

首次加载白屏问题

咱们的商品列表通常会比较长（目前最大有3000+个），此时第一次进入页面白屏时间很长（10s+）；

解决

使用h5的优化思路，相似app。只渲染一部分屏幕内的产品，其余绝大部分产品使用骨架展现；使用此方法有一些限制

• 产品高度须要已知，用来计算当前产品是否在屏幕内
• 滚动体验没有不优化的好，小程序其实也是用的这种列表优化思路，所以快速滚动的时候实际效果是

白屏(小程序优化) => 骨架(咱们的优化)
=> 出现产品

场景

咱们项目全部产品等高，所以比较好计算当前产品是否应该展现。

首先是模板写法

<repeat for="{{products}}" item="dish" index="index">
  <dishItem :dish="dish"
    wx:if="{{showTypeDict[type.id]}}"></dishItem>
  <view wx:else>
    <image src="{{_skeleton}}"></image>
  </view>
</repeat>

说明：

• showTypeDict表明当前须要展现的产品字典，使用字典缘由是基于长列表交互问题
• 对产品进行分类，每次只比较分类的坐标而后展现整个分类
• dishItem是产品对应组件，比较复杂
• skeleton为骨架

监听scroll，根据当前scrollTop和产品分类的坐标来决定showTypeDict的内容，注意截流；

使用以上方法优化后3000+产品白屏时间与100+产品持平。滚动时无卡顿，快速滚动时须要等待一下子产品才能渲染出来；

---

以上