前端加载10000条数据崩溃?

前端长列表加载

什么是长列表？

长列表的出现寓意着本次数据可能会超过1000条甚至为10000条的数据列表, 这时候列表可能会出现问题,出现短暂白屏、或者数据太多导致网页崩溃等情况,尤其在现在的移动端这种情况是非常容易出现的,给予用户的展现机制大部分都是列表

长列表的解决方案公认的有两种,第一种就是无限滚动 前后端共同进行优化, 基本思想就是用户将可视区域的scrollTop滑动成0时进行分页请求 这种方案是一个在正常逻辑正常框架之下的解决方案. 还有一种方案就是虚拟列表, 他的出现主要是由于又一些特殊的场景,可能在一些金融结算等页面 需要展示大盘走势等(本人并不理解)所以这种方案下是不允许进行滑动是的短暂暂停的 这就需要虚拟列表了

虚拟列表的实现分析

虚拟列表就代表这后端是无法帮助我们分页的也就是不管 1000条还是10000条都需要在首屏的时候拿到，用于做一个列表的无缝滚动

这时我们可以得知一个最基础的思路 那就是可以在可视区域内只加载(可理解为只渲染)n个dom元素

为什么要这么做呢

测试渲染时间和加载数据时间的对比

// 我们知道 eventloop 按照 task > microtask > render 的顺序执行
// 所以可以进行这样的实验
function mockData(){
   
  // task
  let start = new Date()
  // task
  for(let i = 0;i< 10000;i++){
   
    document.body.append(document.createElement('div'))
  }
  // 此时打印的时间数值是没有进行渲染之前的
  console.log(new Date().getTime() - start)