表集计算表高性能原理——如何实现百万行纯前端数据秒级响应新建关系型数据管理器结合结构化公式，提供排序、过滤、样式、行列冻结、自动基于高性能表的update、cellupdate等功能。什么是表格？TableSheet是一种快速的数据绑定表视图，具有类似Web的行为和电子表格用户界面。众所周知，Excel的工作表（WorkSheet）是一种自由式布局，基于单元格（CellBase）表格，适用于一些松散的数据布局展示，布局非常灵活，但对于大规模的数据展示来说固定格式，没有优势。escalc表不同于Excel工作表。它是一种基于列（ColumnBase）的网格表（Grid），适合显示规则数据。同时，它还具有Excel工作表（WorkSheet）的用户界面和一些常用操作。并且支持Excel的部分计算功能。同时结合数据绑定的功能，可以在前端快速展示大量固定格式的数据（如数据库表）。Setsuantable的特点就像它名字中的三个字：集合、计算、表：集合（DataManager）：集合的意思是数据的收集和管理。esctable在前端构建了一个名为DataManager的数据管理模块。该模块可以简单理解为前端数据库，DataManager负责与远程数据中心通信，拉取远程数据。数据在前端进行处理，比如数据表的定义、表之间的关系等。同时DataManager还负责处理数据的变形，比如分组、切片、排序、过滤等。计算引擎：escom本身是基于网络结构化数据的计算引擎CalculationEngine。CalculationEngine定义了不同的context计算层级，不同于SpreadJS中WorkSheet基于cells或ranges的计算层级。TableSheet的上下文级别是基于行级别、组级别、数据类。同时，通过CalculationEngine的计算拼接，可以实现TableSheet和WorkSheet之间的数据拼接。这使得计算表不是一个独立的存在，它可以与工作表结合使用，相互配合以满足更多的需求。Table（TableSheet）：整个TableSheet分为三层：渲染层、数据层、功能层。渲染层复用WorkSheet的渲染引擎，具有双缓冲canvas等高性能优势。数据层直接连接DataManger，无需建立数据模型，与SpreadJS的交集更快。功能层不同于传统的表格（Grid）。它转换底层结构化数据。除了支持增删改查等基本功能外，还支持大部分工作表的相应功能（如样式、条件）格式化、数据校验、计算列等。位于数据底层，在保证以上功能支持的基础上，还可以保证数据结构化而不是松散的数据结构。esctable的架构：DataManager负责拉取远程数据。远程数据源可以是RestAPI、OData、GraphQL或Local。数据管理器拉取数据源后，会根据其中的定义建立一个数据表（DataSource）。表结构类似于数据库中的表结构。之后，这些表被用于定义相应的数据视图（View），它定义了显示的结构以及计算列和关系列的添加。最后，将不同的视图（View）绑定到不同的TableSheets。TableSheet负责显示和操作所有视图。计算引擎在数据管理器上工作，而不是直接在表格工作表上工作。这是为了更方便地支持escalc表格与普通工作表之间的公式引用。这就形成了升级计算和普通工作表之间的“化学效应”，比如下面的例子：创建升级计算后，可以直接通过普通工作表中的公式导入升级表中的数据。这样就可以通过escom表格展示数据，同时可以通过worksheet的功能对展示的结果进行数据分析。你甚至可以直接引用esctable中的数据作为数据源来创建数据透视表。esctable的性能：esctable是基于Column进行数据存储的。与Row-based存储结构相比，esctable在筛选和计算上有很大的优势。通过性能测试我们可以知道，对于100W的行级数据，从发送请求加载数据到绘制表格的总耗时约为5秒。过滤数据大约需要50ms（Filtercountry=="UK"）。对100W行数据进行排序（Sortbirthday=="Ascending"）大约需要5秒。100W行数据加入计算列，对每一行数据进行计算。耗时不明显（总耗时4807ms，但是这个事件包含了数据加载和绘制的总耗时，对比之前的测试结果，基本在4800ms左右。因此，加入计算列计算耗时为不明显，可以忽略）。单击链接访问性能测试示例。有兴趣的可以根据以上地址自行体验。延伸阅读React+Springboot+Quartz，从0实现Excel报表自动化电子表格也能当购物车吗？使用纯前端Excel表格控件SpreadJS简单三步即可构建企业现金流量表
