相关背景

近年来随着全球数字化的发展，海量数据给企业数据系统的存储和分析带来了全面的挑战。各个行业和领域都陆续采用云计算技术，将数据集中管理和运转。例如数据仓库、数据湖、分析引擎等技术的投入，为企业大数据应用克服了许多障碍，但也为系统引入了更高的复杂度。

目前的Web应用中，绝大多数都是数据密集型(data-intensive)应用，而且大多数的数据解决方案都是偏向于服务端的，对前端数据处理和分析的潜力挖掘不足。实际上，统计发现，90%以上的系统业务环节，需要处理的数据量都在100W以内，以目前浏览器的性能，完全可以在前端完成数据的处理和分析。并且这样做的好处也很明显：

首先，可以减少请求后台的次数。如果前端仅负责视图呈现，那么很多用户执行的数据分析操作，例如针对一组原始数据进行的分组、汇总、筛选、排序、透视、可视化等动作，每一步操作都会产生一次或多次请求，这对服务器的并发量是一个非常大的考验，而众所周知，并发容量的提升意味着成本的快速增加。

其次，提升用户的操作体验。前端要发出并响应一个数据请求，从打包数据到收到返回数据并渲染，即使网络延迟非常低的情况下，最快也要200~500ms。而纯前端处理10W行级别的数据，响应时间最快可以低到几十毫秒。以人类的反应速度，200ms以内的响应时间可以让用户完全感受不到任何的延迟。

最后，降低系统复杂度，节约服务端计算成本和开发成本，提高可用性。把90%业务环节的数据处理和分析能力放到前端，意味着将90%的数据处理的算力分配到各个用户的终端，这样就极大地节约了服务端的算力。要开发一个能够处理同等数据量的系统，把所有计算都放到后端的方案，要比前后端配合的方案复杂许多倍，这样导致的后端硬件投入和系统研发投入的成本急速提升，同时也会影响系统的可用性。

什么是SpreadJS

对于开发者来说，在面临这种需求时，最好能直接将电子表格作为数据库使用、保存和处理结构化数据，还可以配合后端服务，实现实时分析、跨数据源计算和数据再加工。葡萄城SpreadJS纯前端表格控件，就是一个非常好的选择。

SpreadJS是一款可嵌入Web系统的纯前端类Excel的表格控件，在纯前端的运行环境下，可以双向兼容90%以上Excel原生功能，并保持了类Excel的操作体验，可以让熟悉Excel的用户无缝衔接，无需培训即可上手使用。接下来会分析怎样用SpreadJS，实现将数据分析前端化。

（SpreadJS在线Excel编辑器）

点击体验：SpreadJS在线Excel编辑器

什么是集算表

集算表是SpreadJS的一个功能，它是一个具有网格状行为和电子表格用户界面的快速数据绑定表的视图，除了排序、筛选、样式、行列置顶及单元格编辑之外，它还可以用于构建关系数据管理器和强大的结构化公式。

集算表包含了DataManager和TableSheet两部分：

DataManager

DataManager是一个强大的本地数据引擎，用于处理前端的结构化数据。它可以与后端的数据库进行交互、提取数据、管理数据以及将实时数据同步回数据库。它还可以执行高性能的数据聚合和分析。可以把它理解为一个轻量级的前端关系型数据库。

TableSheet

TableSheet 是一个带有电子表格计算引擎的数据表。具有基于结构化数据的表单绑定，支持具有组级计算和切片器的块分组。它的运行时面板，允许用户调整视图列和组。可以理解为TableSheet是DataManager的视图层，可以将DataManager的分析结果实时展示。

为什么要用集算表

对于结构化数据的管理和分析，大家可能首先会想到采用RDB的SQL语言实现。但是当下数据系统的数据来源复杂，常常是一个报表中的数据来自于多个数据库、非关系型数据库甚至云服务。传统的办法是采用ETL的方式在服务端进行抽取、建模，然后再执行分析，将分析结果回传前端并渲染。但是这样一来，后端的开发量将显著提升，并且在一些对实时性要求较高的场景中，ETL的执行频率和效率都是限制系统的瓶颈。

如果采用SpreadJS的集算表，我们可以将不同源的数据JSON发到前端，集算表会快速建模并按照程序设计好的逻辑自动将分析结果呈现出来，当然，也可以让用户自行选择数据，利用SpreadJS图表、透视表等功能，以Excel的操作方式自由地进行数据分析（参考文章：通过集算表直接创建透视表）。如图：

（集算表交叉列面板）

（类Excel的集算表交互界面）

集算表性能演示

既然我们要解决90%业务环节的数据分析需求，那么对前端数据分析性能需求无疑是非常高的，集算表实现了在前端页面中，100W级别数据秒级响应的能力。如图：

（纯前端百万级数据请求、加载、筛选和排序）

点击此处可以在线体验：集算表性能演示

基于前端高性能集算表的解决方案浅析

当我们有了这样纯前端、高性能的数据处理和分析工具时，不难联想到很多应用场景。以集算表的DataManager为数据源，结合SpreadJS强大灵活的渲染方式，我们可以实现很多常见的表格需求，例如：

引用集算表数据源，实现灵活的报表设计和数据联动：

点击体验：表单公式引用集算表

以集算表为基础，实现多数据源关联查询、展示和填报：

点击体验：集算表交叉列

实现可视化动态数据分组汇总：

点击体验：集算表分组面板

以集算表为数据源创建前端数据透视表：

点击了解：通过集算表直接创建透视表

限于篇幅，本文无法继续展开讲解各个应用场景的细节。欢迎关注作者，未来会持续推出集算表的具体解决方案的文章。

更多纯前端表格在线demo示例：https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html

纯前端表格应用场景：https://www.grapecity.com.cn/developer/spreadjs\#scenarios

移动端示例（可扫码体验）：http://demo.grapecity.com.cn/spreadjs/mobilesample/