Vue开发大数量行表格，原生table与flex模拟表格哪个渲染/重渲染更快

flex布局的div模拟表格方案渲染速度更快，核心原因如下：

• 原生<table>默认使用自适应流式布局算法，任意单元格尺寸变化都会触发整个表格的全量重排，滚动加载/销毁行时的布局计算成本远高于flex布局的div
• 即便给<table>加上table-layout: fixed优化，动态增删DOM节点时的重排范围还是比独立的div行更大，flex布局下每行是独立的渲染层，单个行的修改只会触发局部重排
• div方案的渲染优先级更高，不会像原生table一样默认等待全量内容解析完成后再统一渲染，滚动加载时的视觉响应速度更快

如果你的场景需要大量单元格合并、对齐等原生table自带的特性，也可以给原生table加上table-layout: fixed和固定宽高，两者的性能差距会缩小到可接受范围。

• 完善虚拟滚动逻辑：提前固定每行高度，通过滚动距离直接计算当前视口需要渲染的行区间，仅渲染视口上下各多预留1~2屏的行即可，200行的场景下实际同时渲染的DOM节点不会超过100行，性能压力极小
• 替换事件绑定方式：将所有单元格的@click、@hover事件统一委托到表格根容器上，通过事件目标的自定义属性（比如data-row-id、data-col-id）判断触发事件的单元格，避免反复绑定/解绑上千个事件监听器，大幅降低动态渲染的开销
• 优化单元格渲染逻辑：单元格内的动态组件可以手动监听元素进入视口后再渲染，已渲染过的单元格可以用<keep-alive>缓存，避免滚动时反复销毁重建
• 减少响应式开销：不需要响应式更新的原始列表数据可以用Object.freeze()处理，避免Vue给所有嵌套属性加响应式监听的额外开销

内容的提问来源于stack exchange，提问作者Ivan Tretiy