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+產品持平。滾動時無卡頓，快速滾動時須要等待一下子產品才能渲染出來；

---

以上