V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
imherer
V2EX  ›  程序员

vxe-grid 一次渲染大量数据同时进行 mergeCells 时会卡顿应该如何优化?

  •  
  •   imherer · Apr 9, 2025 · 1244 views
    This topic created in 385 days ago, the information mentioned may be changed or developed.

    大概有 8k 到 1 万的数据量,直接渲染出来的速度还能接受,但是需要单元格合并,不是所有列都需要合并,只需要合并第一列的

    测试了下 4k 条数据不到的时候,合并数据大概有 1k 条,就是 mergeCells 大概有 1k 条数据,渲染差不多要 4s 左右

    在不分页的情况下各位前端大佬们有什么优化方案吗?

    4 replies    2025-04-09 14:48:57 +08:00
    UnluckyNinja
        1
    UnluckyNinja  
       Apr 9, 2025 via Android
    不了解 vxe-grid ,单纯说一下优化要点,如果合并操作只是针对显示内容合并,那么只渲染可见内容能大幅降低开销,如果是某个算法本身就很耗时而你无法调整,那就挪到 worker 里,至少保证 dom 线程不阻塞
    jy02534655
        2
    jy02534655  
       Apr 9, 2025
    如果只是第一列数据需要合并,那试试不使用单元格合并功能,在合并前先遍历数据标记哪些是相同数据,然后渲染后用 css 或者 js 处理下,在界面上看起来数据是合并的就行了,然后开虚拟滚动看看
    imherer
        3
    imherer  
    OP
       Apr 9, 2025
    @UnluckyNinja 嗯,目前就是想到了这个方案还在尝试中
    imherer
        4
    imherer  
    OP
       Apr 9, 2025
    @jy02534655 也是一种方案,我记得 element plus 的 v2table 就是这样做的好像
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   936 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 41ms · UTC 20:39 · PVG 04:39 · LAX 13:39 · JFK 16:39
    ♥ Do have faith in what you're doing.