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

32次阅读

共计 2034 个字符,预计需要花费 6 分钟才能阅读完成。

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

什么是集算表(Table Sheet)?

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

家喻户晓 Excel 的工作表(Work Sheet)是一个自由式布局,基于单元格(Cell Base)的表格,实用于一些涣散式的数据布局展现,布局上来说非常灵活,但对于固定格局的大批量数据展现,不具备劣势。

集算表不同于 Excel 的工作表,它是一个基于列(Column Base)的网状表格(Grid),实用于展现规定数据。同时它还具备了 Excel 工作表(Work Sheet)的用户界面和局部常见操作。并且反对 Excel 的局部计算性能。同时联合数据绑定的性能,对于大量固定格局的数据(例如数据库的表格)能够疾速在前端进行展现。

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

  • 集(Data Manager):

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

  • 算(Calculation Engine):

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

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

  • 表(Table 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 构建企业现金流量表

正文完
 0