• 请求数据,后台返回上千条上万条数据,怎么办


    1.让后端实行分页查询返回数据,否则跑路或者跟经理一起打后端一顿。

    2.直接渲染,卡死用户。浏览器可以处理不过在渲染的时候会卡顿。

    3.文档片段。

    以前,每次创建 div 元素时,都会通过 appendChild 将元素直接插入到页面中。但是 appendChild 是一项昂贵的操作。实际上,我们可以先创建一个文档片段,在创建了 div 元素之后,再将元素插入到文档片段中。创建完所有 div 元素后,将片段插入页面。这样做还可以提高页面性能。

    4.延迟加载。

    虽然后端一次返回这么多数据,但用户的屏幕只能同时显示有限的数据。所以我们可以采用延迟加载的策略,根据用户的滚动位置动态渲染数据。要获取用户的滚动位置,我们可以在列表末尾添加一个空节点空白。每当视口出现空白时,就意味着用户已经滚动到网页底部,这意味着我们需要继续渲染数据。同时,我们可以使用getBoundingClientRect来判断空白是否在页面底部。

    5.虚拟列表方案。

    1.写一个代表可视区域的div固定器高度。

            通过overflow使其允许纵向y轴滚动。

    2.计算可视区域中可以显示的数据条数。

            用可视区域高度除以单条数据高度就可以得到。

    3.监听滚动,当滚动条滚动的时候,计算出被卷起的数据的高度。

    4.计算可视区域内数据的起始索引,也就是区域内的第一条数据,用卷起的高度除以单条数据的高度。

    5.计算可视区域内数据的结束索引。

            通过起始索引加上刚刚计算出来的可以显示的数据的条数。

    6.取起始索引和结束索引中间的数据渲染到可视化区域。

    7.计算起始索引对应的数据在列表中的偏移位置,并设置到列表上。

    缺陷:防抖和节流情况要考虑;

               每个数据的高度可能不同,要考虑;

  • 相关阅读:
    HTML笔记(标签、)
    Sentinel流控规则
    hutool、esayPoi、easyExcel、读写数据,性能对比
    pvrcnn在openpcdet框架下的实现流程
    【前端设计模式】之命令模式
    微软独家付费功能,也被完美解锁了
    ch4-2 音频信号的时域特征
    2024042期传足14场胜负前瞻
    编译和链接
    并发模式之生产者消费者模式
  • 原文地址:https://blog.csdn.net/weixin_67490903/article/details/126491528