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

最新推荐文章于 2025-04-09 10:10:40 发布

极乐叔

最新推荐文章于 2025-04-09 10:10:40 发布

阅读量2.5k

点赞数

分类专栏：小程序开发文章标签：小程序数据处理

本文链接：https://blog.csdn.net/rolan1993/article/details/118192034

版权

本文探讨了小程序在处理大量数据时遇到的DOM限制问题，提出了一套优化方案，包括减少DOM嵌套、优化setData使用、使用自定义组件和虚拟列表。通过这些方法，即便面对100万条商品数据，也能保证列表的丝滑运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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