Vuetify 1.x Data Table分页性能低下问题求助

• 先排查DOM渲染开销：拆分多列后每行DOM节点数量大幅增加，25/50行的总节点数可能是之前的数倍。打开浏览器DevTools的Performance面板录制分页切换过程，确认是否是重绘/回流耗时过高。优化方向：
  • 给所有列设置固定宽度，避免浏览器动态计算布局
  • 改用虚拟滚动方案，只渲染当前视口内的行，大幅减少DOM节点总数
  • 将排序相关的计算逻辑提前到数据处理阶段，避免在模板中使用复杂表达式，降低渲染时的计算量
• 盯紧排序相关的额外消耗：多列支持排序时，有可能分页切换时框架在执行DOM层面的排序操作（而非数据层面），这类操作开销极大。先确认：
  • 排序是在数据层面完成（比如计算属性直接返回已排序的数据集）还是DOM层面（框架通过移动节点实现排序），必须切换为数据层面排序
  • 关闭列排序的默认动画效果，动画会加重绘负担
• 重构计算属性逻辑：可以把分页参数加入计算属性的依赖项，这样切换分页时计算属性会重新计算，只处理当前页的数据，无需全量处理。如果必须返回全量数据，要确保分页组件是基于数据切片渲染，而非通过过滤DOM节点实现分页
• 提前完成列拆分处理：不要在渲染阶段才做列拆分，拿到原始数据后就将每列需要展示的内容处理完成并存储在每条记录中，渲染时直接取值即可，避免模板内逐个执行计算逻辑。重复的格式化逻辑可以做缓存，相同数据复用处理结果
• 检查UI组件的优化配置：如果使用的是现成的表格组件（如Element UI、Ant Design等），查看是否有针对大数据量的优化开关，比如开启虚拟滚动、懒加载功能，关闭不必要的hover效果、多余的边框渲染逻辑

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