SpreadJS 的技术优势

11.1 性能优势

Canvas 绘制:SpreadJS 在构建界面时,使用 Canvas 来绘制,只会关注用户真正看到的部分,无论单元格如何变化,绘制的部分不会有太大改变,这使得系统操作的流畅度大幅提升。

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

 

11.2 低内存占用

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

借助稀疏数组,开发者甚至可以随时替换或恢复整个存储结构中的任何一个级别的节点,实现高效的数据回滚和数据恢复。

 

11.3 计算引擎

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

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

利用这样的机制,SpreadJS 大大提升了整个表格的运算速度,给用户更好的使用体验和更加精准的运算结果。