V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yetrun
V2EX  ›  前端开发

后端返回五千条数据,前端获取会卡顿吗?

  •  
  •   yetrun · 2023-08-10 11:24:28 +08:00 · 2022 次点击
    这是一个创建于 473 天前的主题,其中的信息可能已经有所发展或是发生改变。

    每条数据不会很大,像:

    { id: 1, name: 'Jim', age: 13, sex: 'mail', hobby: 'sport' }

    之类。

    要不要做分页?分页可用瀑布流吗?

    11 条回复    2023-11-08 09:44:18 +08:00
    lion9527
        1
    lion9527  
       2023-08-10 11:29:58 +08:00
    不会卡;要分页;可用瀑布流。
    Tyaqing
        2
    Tyaqing  
       2023-08-10 11:31:23 +08:00
    正解是后端分页
    如果一定有 5000 条,直接一次性渲染出来肯定会卡顿的,dom 操作代价很大.
    方法一:可以做个队列,每 100ms 渲染 20 条这样.
    方法二:虚拟列表渲染.
    amon
        3
    amon  
       2023-08-10 11:33:13 +08:00
    根据你给的样例,5000 条数据大概也就几百 kb ,前端可以轻松处理。

    当然也要看具体的场景,比如系统是 toB 还是 toC 、性能要求、页面是否需要分页等等。
    8355
        4
    8355  
       2023-08-10 11:33:33 +08:00
    取决于你的渲染逻辑吧
    不过还是应该找后端优化就是了,因为现在是 5000 条以后是 50000 条还要你优化?
    mdn
        5
    mdn  
       2023-08-10 11:35:29 +08:00
    获取数据不会卡,直接一次性渲染到页面会卡顿
    用户一屏也不需要看到这么多数据,建议 1. 后端分页或者前端假分页 2. 虚拟列表
    mdn
        6
    mdn  
       2023-08-10 11:36:59 +08:00   ❤️ 1
    是否卡顿主要取决于每条数据的 dom 是否复杂
    nothingistrue
        7
    nothingistrue  
       2023-08-10 12:13:57 +08:00
    获取最多会长时间 loading ,但不会卡 UI 。获取之后,前端一次性将这 5 千条都渲染出来,可能会卡。但是否会卡还要看你的渲染逻辑。
    benjunk
        8
    benjunk  
       2023-08-10 15:01:55 +08:00
    只获取不会卡,就看你对数据如何操作了
    hymxm
        9
    hymxm  
       2023-08-16 16:59:01 +08:00
    还取决于客户的电脑配置吧
    red666
        10
    red666  
       2023-09-09 12:28:00 +08:00
    昨天面试,面试官问了同样的问题,我答了上滑加载和虚拟列表,面试官问我还有没有其它方法。。。。
    lyxxxh2
        11
    lyxxxh2  
       2023-11-08 09:44:18 +08:00
    同 @amon


    你渲染 5k 个 `li`,啥事没有。
    渲染 5k 个组件,应该卡死。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1031 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 20:43 · PVG 04:43 · LAX 12:43 · JFK 15:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.