表格集算表高性能原理——怎样实现纯前端百万行数据秒级响应

2023-01-09 10:29:22 +08:00
 GrapeCityChina

集算表 ( Table Sheet )是一个具备高性能渲染、数据绑定功能、公式计算能力的数据表格,通过全新构建的关系型数据管理器结合结构化公式,在高性能表格的基础上提供排序、筛选、样式、行列冻结、自动更新、单元格更新等功能。

什么是集算表( Table Sheet )?

集算表是一个具有网络状行为和电子表格用户界面的快速数据绑定表的视图。

众所周知 Excel 的工作表( Work Sheet )是一个自由式布局,基于单元格( Cell Base )的表格,适用于一些松散式的数据布局展示,布局上来说非常灵活,但对于固定格式的大批量数据展示,不具备优势。

集算表不同于 Excel 的工作表,它是一个基于列( Column Base )的网状表格( Grid ),适用于展示规则数据。同时它还具备了 Excel 工作表( Work Sheet )的用户界面和部分常见操作。并且支持 Excel 的部分计算功能。同时结合数据绑定的功能,对于大量固定格式的数据(例如数据库的表格)可以快速在前端进行展示。

集算表的特点正如它的名字的三个字:集,算,表:

集的意思就是数据集记和管理。集算表在前端构建了一个叫做 Data Manager 的数据管理模块。该模块可以简单理解为一个前端的数据库,Data Manager 负责与远端的数据中心进行通信,拉取远端的数据。在前端处理数据,例如数据表的定义,表间关系等。同时 Data Manager 还负责处理数据的变形,例如分组,切片,排序,过滤等。

集算表本身基于网络结构化数据的计算引擎 Calculation Engine 。Calculation Engine 定义不同的上下文计算层级,不同与 SpreadJS 中工作表( Work Sheet )基于单元格或者区域( Range )的计算层级,集算表( Table Sheet )的上下文层级是基于行级,组级,数据级。

同时通过 Calculation Engine 的计算串联,使得集算表( Table Sheet )与工作表( Work Sheet )之间可以进行数据串联。这使得计算表不是一个独立存在,它可以与工作表结合使用,相互配合以适应更多的需求。

整个 Table Sheet 分为三层:渲染层,数据层,功能层。

渲染层复用了工作表( Work Sheet )的渲染引擎,具备双缓冲画布等高性能的优势。

数据层直连 Data Manger ,无需建立数据模型,相交 SpreadJS 更加快速。

功能层不同于传统表格( Grid ),将底层结构化数据进行改造,在支持增删改查等基本功能的基础上,还额外支持了大部分工作表( Work Sheet )的对应功能,如样式,条件格式,数据验证,计算列等。

在数据底层,保证上述功能支持的基础上,还能保证数据的结构化,而非松散的数据结构。

集算表的架构:

Data Manager 负责拉取远端数据,远端数据源可以是 Rest API 、OData 、GraphQL 、Local 。Data Manager 在拉取数据源之后会根据其中的定义构建数据表( Data Source ),该表结构与数据库中的表结构类似。之后通过这些表来定义对应的数据视图( View ),视图中定义了展示的结构以及计算列,关系列的添加。最终将不同的视图( View )绑定在不同的 Table Sheet 上。Table Sheet 负责对所有的视图进行展示和操作。Calc Engine 在 Data Manager 上工作,而非直接工作在 Table Sheet 上,这是为了更方便的去支持集算表与普通工作表之间的公式引用。这使得集算表与普通工作表之间产生“化学效应“,例如下面的示例:

在创建了集算表之后可以在普通的工作表中直接通过公式引入集算表的表格中的数据。这样可以做到通过集算表对数据进行展示,同时通过工作表的功能,对展示的结果进行数据分析。

甚至可以直接引用集算表中的数据当做数据数据源,创建数据透视表。

集算表的性能:

集算表是基于 Column 进行数据存储,相较于基于 Row 的存储结构,在筛选和计算方面有很大的优势。

通过性能测试,我们可以了解到,对于 100W 行级别的数据,集算表从发送请求加载数据到将表格绘制完毕总共的耗时是大约 5 秒钟。

筛选数据花费时间在 50ms 左右( Filter country == "UK")。

100W 行数据排序花费时间在 5S 左右( Sort birthday == "Ascending")。

对 100W 行数据添加计算列,对每行数据进行计算,花费时间不明显(总计时间 4807ms ,但该事件包含了数据加载,绘制的总时间,对比之前的测试结果基本在 4800ms 左右。故添加计算列计算花费的时间不明显,可忽略不计)。

点击链接访问性能测试示例

大家如果感兴趣自行按照上述地址体验即可。

拓展阅读

React + Springboot + Quartz ,从 0 实现 Excel 报表自动化

电子表格也能做购物车?简单三步就能实现

使用纯前端类 Excel 表格控件 SpreadJS 构建企业现金流量表

643 次点击
所在节点    推广
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/907510

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX