如何让10万条数据的小程序列表如丝般顺滑

某天闲着无聊想练一下手速，去上拉一个小程序项目中一个有1万多条商品数据的列表。在数据加载到1000多条后，是列表居然出现了白屏。看了一下控制台：

‘Dom limit exceeded’，dom数超出了限制， 不知道微信是出于什么考虑，要限制页面的dom数量。

一.小程序页面限制多少个wxml节点？

写了个小dome做了个测试。 listData的数据结构为：

listData:[
   {
isDisplay:true,
itemList:[{
qus:'下面哪位是刘发财女朋友?',
answerA:'刘亦菲',
answerB:'迪丽热巴',
answerC:'斋藤飞鸟',
answerD:'花泽香菜',
       }
      .......//20条数据
     ]
   }]

页面渲染效果：

{{item.qus}}

A. {{item.answerA}}
B. {{item.answerB}}
C. {{item.answerC}}
D. {{item.answerD}}

2.dome2，删除了不必要的dom嵌套

{{item.qus}}

A. {{item.answerA}}
B. {{item.answerB}}
C. {{item.answerC}}
D. {{item.answerD}}

通过大致计算，一个小程序页面大概可以渲染2万个wxml节点 而小程序官方的性能测评得分条件为少于1000个wxml节点官方链接

二.列表页面优化

newList=[{...},{...}];
this.setData({
     listData:[...this.data.listData,...newList]
   })

let index=0;
this.setData({
     [`listData[${index}].isDisplay`]:false,
  })

for(let index=0;index<10;index++){
this.setData({
        [`listData[${index}].isDisplay`]:false,
     })
  }

let changeData={};
for(let index=0;index<10;index++){
      changeData[[`listData[${index}].isDisplay`]]=false;
  }
this.setData(changeData);

这样我们就把数组listData中下标从0到9的元素的isDisplay属性改成了false。

• setDate往数组末尾添加数据

如果只添加一条数据

let newData={...};
this.setData({
    [`listData[${this.data.listData.length}]`]:newData
  })

如果是添加多条数据

let newData=[{...},{...},{...},{...},{...},{...}];
let changeData={};
let index=this.data.listData.length
    newData.forEach((item) => {
        changeData['listData[' + (index++) + ']'] = item //赋值，索引递增
    }) 
  this.setData(changeData)

三.使用自定义组件

可以把列表的一行或者多行封装到自定义组件里，在列表页使用一个组件，只算一个节点，这样你的列表能渲染的数据可以成倍数的增加。组件内的节点数也是有限制的，但是你可以一层层嵌套组件实现列表的无限加载，如果你不怕麻烦的话

四.使用虚拟列表

经过上面的一系列操作后，列表的性能会得到很大的提升，但是如果数据量实在太大，wxml节点数也会超出限制，导致页面发生错误。我们的处理方法是使用虚拟列表，页面只渲染当前可视区域以及可视区域上下若干条数据的节点，通过isDisplay控制节点的渲染。

• 可视区域上方：above
• 可视区域：screen
• 可视区域下方：below

listData:[
   {
isDisplay:true,
itemList:[{
qus:'下面哪位是刘发财女朋友?',
answerA:'刘亦菲',
answerB:'迪丽热巴',
answerC:'斋藤飞鸟',
answerD:'花泽香菜',
       }
      .......//二维数组中的条数根据项目实际情况
     ]
   }]

data{
itemHeight:4520,//列表第一层dom高度，单位为rpx
itemPxHeight:'',//转化为px高度,因为小程序获取的滚动条高度单位为px
aboveShowIndex:0,//已渲染数据的第一条的Index
belowShowNum:0,//显示区域下方隐藏的条数
oldSrollTop:0,//记录上一次滚动的滚动条高度，判断滚动方向
prepareNum:5,//可视区域上下方要渲染的数量
throttleTime:200，//滚动事件节流的时间，单位ms
   }

3.wxml的dom结构

{{item.qus}}

A. {{item.answerA}}
B. {{item.answerB}}
C. {{item.answerC}}
D. {{item.answerD}}

4.获取列表第一层dom的px高度

let query = wx.createSelectorQuery();
  query.select('.content').boundingClientRect(rect=>{
let clientWidth = rect.width;
let ratio = 750 / clientWidth;
this.setData({
      itemPxHeight:Math.floor(this.data.itemHeight/ratio),
     })
   }).exec();

5.页面滚动时间节流

function throttle(fn){
  let valid = true
return function() {
if(!valid){
return false 
     }
     // 工作时间，执行函数并且在间隔期内把状态位设为无效
      valid = false
      setTimeout(() => {
          fn.call(this,arguments);
          valid = true;
      }, this.data.throttleTime)
  }
}

6.页面滚动事件处理

onPageScroll:throttle(function(e){
let scrollTop=e[0].scrollTop;//滚动条高度
let itemNum=Math.floor(scrollTop/this.data.itemPxHeight);//计算出可视区域的数据Index
let clearindex=itemNum-this.data.prepareNum+1;//滑动后需要渲染数据第一条的index
let oldSrollTop=this.data.oldSrollTop;//滚动前的scrotop,用于判断滚动的方向
let aboveShowIndex=this.data.aboveShowIndex；//获取已渲染数据第一条的index
let listDataLen=this.data.listData.length;
let changeData={}
  //向下滚动
if(scrollTop-oldSrollTop>0){
if(clearindex>0){
         //滚动后需要变更的条数
for(let i=aboveShowIndex;i                changeData[[`listData[${i}].isDisplay`]]=false;
let belowShowIndex=i+2*this.data.prepareNum;
if(i+2*this.data.prepareNum                  changeData[[`listData[${belowShowIndex}].isDisplay`]]=true;
                 }
          }   
        }    
    }else{//向上滚动
if(clearindex>=0){
let changeData={}
for(let i=aboveShowIndex-1;i>=clearindex;i--){
let belowShowIndex=i+2*this.data.prepareNum
if(i+2*this.data.prepareNum<=listDataLen-1){
            changeData[[`listData[${belowShowIndex}].isDisplay`]]=false;
           }
           changeData[[`listData[${i}].isDisplay`]]=true;
         }  
        }else{
if(aboveShowIndex>0){
for(let i=0;i              this.setData({
                [`listData[${i}].isDisplay`]:true,
              })
            }
          }
        }      
    }
    clearindex=clearindex>0?clearindex:0
if(clearindex>=0&&!(clearindex>0&&clearindex==this.data.aboveShowIndex)){
      changeData.aboveShowIndex=clearindex;
let belowShowNum=this.data.listData.length-(2*this.data.prepareNum+clearindex)
      belowShowNum=belowShowNum>0?belowShowNum:0
if(belowShowNum>=0){
        changeData.belowShowNum=belowShowNum
      }
      this.setData(changeData)
    }
    this.setData({
      oldSrollTop:scrollTop
    })
  }),;i++){
){
;i++){>

经过上面的处理后，页面的wxml节点数量相对稳定，可能因为可视区域数据的index计算误差，页面渲染的数据有小幅度的浮动，但是已经完全不会超过小程序页面的节点数量的限制。理论上100万条数据的列表也不会有问题，只要你有耐心和精力一直划列表加载这么多数据。