纯前端表格控件SpreadJS:电子表格技术实践 - 内存

在前端表格中,表格可以是松散布局的一种UI表达方式,它的最小描述单元是一个单元格,也就是我们常说的CellBase。

点击获取SpreadJS工具下载

常用的数据结构有二维数组和对象数组,对于二维数组可以想象如果出现如图所示的场景,一个表格2万行,50列。如果在这个表格的第一个单元格和最后一个单元格输入数据,可以想象一下即时只有2个单元格有内容他的内存占用仍旧会很大。

纯前端表格控件SpreadJS使用教程:电子表格技术实践(二)内存

同时我们还可以想象另外一个场景,对于如图的表格如果我们数据做了剪切操作,同时表格需要支持撤销和回滚,对于以上两种方式应该怎么去做?

纯前端表格控件SpreadJS使用教程:电子表格技术实践(二)内存

利用前端语言的特性,实现了一组稀疏矩阵存储模型(Sparse Array)。

相较于传统的链式存储或是数组存储,稀疏矩阵存储构建了基于行索引为Key的数据字典,在松散布局的表格数据中,稀疏矩阵只会对非空数据进行存储,而不需要对空数据开辟额外的内存空间。

对于前面2万行,50列的表格,存储结构如图所示。

纯前端表格控件SpreadJS使用教程:电子表格技术实践(二)内存

使用这种特殊的存储策略,使得数据片段化变得容易,可以随时框取整个数据层中的一片数据,进行序列化或反序列化。

借用这样的特性,我们可以随时替换或恢复整个存储结构中的任何一个级别的节点,以改变引用的方式高效解决了表格数据回滚和恢复。这一点也是电子表格支持在线协同的一个基础。

另外,使用稀疏矩阵带来了另一个优势,在数据检索遍历时,无需判空,只要对有效数据校验即可。

纯前端表格控件SpreadJS使用教程:电子表格技术实践(二)内存

SpreadJS | 下载试用

纯前端表格控件SpreadJS,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,备受华为、苏宁易购、天弘基金等行业龙头企业的青睐,并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能,满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求,极大的降低企业研发成本和项目交付风险。

本文转载自葡萄城

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章