vxe-table v4.9+、v3.11+ 发布,渲染性能大幅提升,大幅降低白屏渲染空白期、支持动态列宽、动态行高

vxe-table 从 2018 年开源以来,发布稳定版本从 v1 ~ v4 版本,作为专业的表格组件,与一般组件库的普通 Table 没有可比性,不管是功能还是性能已经很强大很完善了。v4.9+ / v3.11+ 主要是解决动态行高与虚拟滚动与动态行高的问题、复杂度高的渲染出现渲染期空白的问题解决。

由于老版本的虚拟滚动存在很多局限性,比如不支持动态行高、渲染复杂度高了运算跟不上就会容易出现滚动期的白屏。

查看 Gitee

vxe-table 4.9+ 对虚拟渲染进行重构,使其可以支持虚拟滚动的同时还能支持动态行高。不仅如此,对于冻结列一级自定义复杂渲染的场景的渲染性能更是大幅提升。以下来针对常用的场景做个测试,特殊场景需针对特殊优化处理,这里不做演示。

虚拟滚动

使用 100列,5000-50000行数据,1万条的渲染更是基本在50毫秒内,相比老版本快了几倍,从滚动动画到拖动把柄快速拉动,都是很流畅的。

在这里插入图片描述

动态行高

动态行高也是一样,区别就是所支持的最大数据量少很多了,好处保持流畅的情况下对于5万以内的数据量是完全没问题。

需要注意动态行高与横向虚拟滚动同时使用时,由于其他被卷去的单元格是不渲染,当滑动到可视区就会被渲染,这时可能由于后面的单元格比前面的单元格高一些,就会有一种单元格突然变高的特性

在这里插入图片描述

无限滚动场景

无限滚动的实现可以由 scroll 事件来处理数据,比如滚动到顶部或底部时,调用接口获取下一页的数据,从而实现不分页加载全量数据。
在这里插入图片描述

高性能简化图表

在单元格渲染轻量级的简化图表,由于是纯 css 图标,所以即使是十万级数据也是秒渲染的
在这里插入图片描述
在这里插入图片描述

树结构

企业版本的更新:优化树形渲染,支持树形的单元格选取与复制粘贴。渲染性能也是大幅提升

在这里插入图片描述

集成图表

企业版本的更新:支持树形表格的单元格选取、单元格选取与动态行高、支持更多虚拟表格的操作

在这里插入图片描述
在这里插入图片描述

性能优化

  • 一般列没大于16列,没必要开启横向虚拟滚动;
  • 横向虚拟滚动启用后尽可能使可视区的列不大于10列;
  • 纵向虚拟滚动启用后尽可能使可视区的行不大于20行;
  • 不管是横向还是纵向虚拟渲染,包括各种单元格自定义渲染,渲染量越大就越不流畅,尽可能减少同步运算的方法;
  • 如果存在分页,建议是大于100行再启用纵向虚拟滚动;
  • 如果是确定数据量较大的场景,建议一直开启虚拟滚动
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值