univue系列

uniapp 小程序数据过大列表卡顿

2024-01-28  本文已影响0人  litielongxx

小程序一次写入过大数据会卡顿,因为setData 频繁 渲染不过来
查阅大致小程序官方设计之初基于渲染的速度和考虑到数据量不会太大背景下官方采用的是另外一种的dom元素更快的方式。相应的一次写入稍微大时会较传统的web更容易卡。
不仅和大小有关,还和页面dom的复杂度有关,大致是1-200k会较为明显缓慢。
1 虚拟列表加载,常见的左右滑动。只显示左右或上中下其余多条。
2 分批次写入setData,例如原本写入100k,改为10k、10k的渲染,待一帧渲染完后继续。

let temp =[....] // 例如1000条数据
 // 分批次写入数据
        const batchSize = 30;
        const batches = [];
        for (let i = 0; i < temp.length; i += batchSize) {
          batches.push(temp.slice(i, i + batchSize));
        }

        // 每帧渲染一小部分数据
        const setData = (batch) => {
          this.studentList =[...this.studentList,...batch]
        };

        // 循环写入数据
        const interval = setInterval(() => {
          if (batches.length === 0) {
            clearInterval(interval);
            return;
          }

          const batch = batches.shift();
          setData(batch);
        }, 16); // 16ms 是浏览器一帧渲染的理想时间
上一篇下一篇

猜你喜欢

热点阅读