葡萄城表格技术

高性能

在企业应用中，数据是唯一的主干。假如作为数据载体的表格性能低下，系统便会被“吐槽”卡顿、操作不流畅等问题，为此，任何基于表格开发的应用系统，必须满足以最低的资源消耗，实现高速渲染、计算和频繁刷新的效果。

对于在线系统而言，为了追求更好的用户体验，需要对 UI 界面反复优化，而频繁的优化操作，将引发浏览器多次重绘。在这个过程中，UI 元素的创建及修改，会激活浏览器内部垃圾回收机制，影响数据处理效率。

基于此，电子表格系统的性能主要体现以下三个方面：

• 在当页面从服务端下载了数据之后，表格是否能快速的呈现数据。
• 用户滚动、操作时，表格是否流畅。
• 当表格中有筛选、排序，以及大数据量的数据透视时是否能快速完成。

为了解决这些问题，葡萄城表格组件引入了 Canvas 绘制模型和双缓冲画布渲染技术。

最新发布：葡萄城表格产品性能测试报告 模拟实际应用场景而设计的近 20 个性能测试用例，从执行时间、内存、文件体积等方面全面体现葡萄城产品的卓越性能。

Canvas 绘制模型

使用 Canvas 绘制，表格在页面绘制过程中不仅无需重复创建和销毁 DOM 元素，更是打破了 DOM 元素渲染对 UI 的诸多限制，可绘制种类更为丰富的 UI 元素，如线形、特殊图形等，通过画法逻辑，还可实现更加精准的UI界面渲染，解决了浏览器差异造成的样式误差。

（HTML5 Canvas 绘制表格）

双缓存画布渲染

葡萄城表格技术采用了类似油画的分层绘制，即绘制引擎基于油画的绘制原理，分为主体图层和装饰图层，主体图层渲染持久的、不易改变的元素，例如背景，单元格，表格线等。装饰图层则渲染常变性元素，如选择框、拖拽框、悬浮效果等。当表格元素发生动态绘制，如表格滚动时， SpreadJS 会将主画布清空，从缓存画布中根据行为上下文进行画布偏移，将偏移后的图层直接绘制在主画布上，再在主画布上绘制剩余部分，使整个表格的滚动过程更加流畅。

（双缓存画布技术）

处理海量复杂数据

随着前端工程化的高速发展，企业应用系统已经由 C/S 向 B/S 架构转型，各种前端工程脚手架日渐成熟，WebComponent 标准也被提上日程，对于前端开发者来说，不仅需要面对单线程处理复杂业务数据的挑战，还要从产品最开始设计以及运行时考虑内存的使用情况，尽可能的降低内存占用，防止页面崩溃。

这里的复杂数据，不仅指的是数据量大，更是一种数据的处理状态。为了追求更高效的数据前后端交互，并快速响应数据变更及数据回滚状态，葡萄城改变了表格数据的存储方式，由常规数组改为稀疏矩阵，这一点，确保了葡萄城表格技术产品足以轻松应对海量复杂数据的挑战。

稀疏矩阵

相较于传统的链式存储或是数组存储，稀疏矩阵存储构建了基于行索引为 Key 的数据字典，在松散布局的表格数据中，稀疏矩阵只会对非空数据进行存储，而不需要对空数据开辟额外的内存空间。使用这种特殊的存储策略，使得数据片段化变得容易，可以随时框取整个数据层中的一片数据，进行序列化或反序列化。

借用这一特性，葡萄城的 SpreadJS 和 GcExcel 表格组件可以随时替换或恢复整个存储结构中的任何一个级别的节点，以改变引用的方式更高效的解决表格数据回滚和恢复问题，而这一点也为葡萄城表格组件支持多人在线协同打下了一个良好的基础。

此外，使用稀疏矩阵还带来了一个优势，葡萄城的表格组件在数据检索遍历时，无需判空，只要对有效数据校验即可快速获取想要的值。

（稀疏矩阵存储策略）

计算公式引擎

除了应用于数据展示，表格更多的使用场景是处理计算问题，尤其在面对复杂公式时，表格需要提供更为可靠的计算结果。

因此，衡量表格组件能力的一个重要指标，就是在为应用程序实现类似 Excel 的公式函数时，能否正确的解析并计算结果，而看似简单的 Excel 公式函数，却具备高阶编程语言的一切特性，如语法分析、解析、运算、执行等。

葡萄城的表格组件通过引入其自主研发的计算公式引擎，已做到兼容 450 多种 Excel 公式函数，并可轻松扩展，满足用户自定义、异步调用、跨表格引用等多场景计算需求。

表达式树

葡萄城表格组件的计算引擎依托于一种表达式树的结构类型，即当用户设置一个公式到表格中，计算引擎会将其解析为一个中缀表达式，通过计算引擎的解析后，会在内存中以树型结构进行存储，这个树型结构就是表达式树。表达式树的生成，是后续构建计算依赖链的关键。

当一个公式被解析为表达式树后，计算引擎将根据运算上下文为其构建运算依赖链。运算依赖链的目的是为了按需计算，当表格内容发生变化时，只有被影响的表达式树会进行运算，而运算的依据就是依赖链。

（葡萄城表格组件构建的公式依赖链）

如上图所示，这是葡萄城表格组件的计算引擎在构建计算依赖链时的一个简单的流程图，表达式树从计算存储模型中找到对应的根节点以及根节点标识，随后遍历整个表达式树，找出其他依赖标识，构建依赖关系。

当整个依赖链中的任意节点发生变化时，沿着这条依赖链，计算引擎会查找依赖节点并进行重算，这个过程中，没有在依赖链中的节点是不会发生重算计算的，也就是我们所说的脏值运算。

正是利用这样的机制，葡萄城的表格组件才得以大大提升了整个表格的运算速度，给用户更好的使用体验和更加精准的运算结果。

在线导入导出

SpreadJS 无需借助任何后台代码和第三方组件，便可直接在浏览器中完成 Excel、CSV、JSON 等文件的导入导出、PDF 导出、打印及预览操作。

（在线导入导出 Excel 文件）

通过 SpreadJS 提供的设计器可以快速的进行模板设计，设计器中可以通过拖拽，点击，配置等操作快速进行模板设置从而节省大量的代码编辑操作。当在设计器中设计好模板之后可以通过设计器提供的导出功能，将模板导出成 ssjson 文件（该文件就是将序列化 toJSON 之后生成 JSON 格式保存成的文件）。

在页面展示的时候我们可以在 js 中读取该文件：

例如 jquery 的 \$.getJSON(“/xxx.ssjson”)

通过 js 文件读取等方式，将获取到的 json 对象通过 spread.fromJSON 反序列化成页面展示，这样就完成了模板的快速构建。

JSON 序列化与反序列化

• 通过序列化可以将当前的整个 Spread 序列化成为 JSON 格式进行存储
• 通过反序列化可以将之前序列化的 JSON 格式的对象反序列化为页面进行展示