小程序列表数据加载优化，百万数据丝滑运行

天闲着无聊想练一下手速，去上拉一个小程序项目中一个有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节点官方链接

二.列表页面优化

1.减少不必要的标签嵌套

由上面的测试dome可知，在不影响代码运行和可读性的前提下，尽量减少标签的嵌套，可以大幅的增加页面数据的列表条数，毕竟公司不是按代码行数发工资的。如果你的列表数据量有限，