dexteryao 发表于 2021-8-2 10:46:35

前端电子表格技术实践(二)内存

在前端表格中,表格可以是松散布局的一种UI表达方式,它的最小描述单元是一个单元格,也就是我们常说的CellBase。常用的数据结构有二维数组和对象数组.对于二维数组可以想象如果出现如图所示的场景,一个表格2万行,50列。如果在这个表格的第一个单元格和最后一个单元格输入数据,可以想象一下即时只有2个单元格有内容他的内存占用仍旧会很大。




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

利用前端语言的特性,实现了一组稀疏矩阵存储模型(Sparse Array)。相较于传统的链式存储或是数组存储,稀疏矩阵存储构建了基于行索引为Key的数据字典,在松散布局的表格数据中,稀疏矩阵只会对非空数据进行存储,而不需要对空数据开辟额外的内存空间。对于前面2万行,50列的表格,存储结构如图所示。

使用这种特殊的存储策略,使得数据片段化变得容易,可以随时框取整个数据层中的一片数据,进行序列化或反序列化。借用这样的特性,我们可以随时替换或恢复整个存储结构中的任何一个级别的节点,以改变引用的方式高效解决了表格数据回滚和恢复。这一点也是电子表格支持在线协同的一个基础。
另外,使用稀疏矩阵带来了另一个优势,在数据检索遍历时,无需判空,只要对有效数据校验即可。



leo_ 发表于 2024-7-3 16:55:57

使用稀疏矩阵节省内存占用,这个需要特殊设置吗?

leo_ 发表于 2024-7-3 17:03:02

spread.fromJSON(json);使用的是稀疏矩阵吗?

Ellia.Duan 发表于 2024-7-3 17:34:01

leo_ 发表于 2024-7-3 16:55
使用稀疏矩阵节省内存占用,这个需要特殊设置吗?

不需要,是SpreadJS的底层逻辑。

Ellia.Duan 发表于 2024-7-3 17:34:34

leo_ 发表于 2024-7-3 17:03
spread.fromJSON(json);使用的是稀疏矩阵吗?

您如果有具体的问题,可以发个新帖描述您当前问题或者需求。
页: [1]
查看完整版本: 前端电子表格技术实践(二)内存