共计 4115 个字符，预计需要花费 11 分钟才能阅读完成。
转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。
表格作为数据出现的一种根本形式，在各类软件系统都施展着重要的作用。在挪动互联时代，即使再简单的数据通过“表格”的整顿，都能够清晰的出现给用户，并反对用户从多个维度查看、筛选和批改。不论是应答文档、报告、凭证，还是票据，表格都可能附加存储更多的款式信息，尤其对离散式数据存储更加高效。
现在，企业开始纷纷尝试信息化转型，前端、后端、中台、云，这些概念也逐步变得妇孺皆知，在简直所有的 B 端产品中，表格都作为一种交互式组件受到宽泛欢送。
不过即便如此，表格也常常因为款式简单、操作繁琐等因素，在用户应用时造成诸多体验问题，尤其在 Web 我的项目中，表格技术时常受限于前端性能制约。
那么，有没有一种方法，能够帮忙开发者冲破前端表格技术的窘境，实现关键技术落地呢？
2020 年 6 月 30 日，作为寰球当先的软件开发技术提供商，葡萄城举办了“赋能·智变”线上品牌战略发布会。本次会议上，葡萄城正式公布“赋能开发者”业务使命，并就前端表格开发等技术话题进行了分享。
前端表格为开发者带来的困扰
在 C / S 架构的应用程序中，表格类组件能够获取更多资源反对，内存管制也更加间接。然而当企业进行 B / S 转型时，前端表格却面临着诸多挑战。
例如，多浏览器差别、浏览器沙箱机制、内存拜访受限、客户端性能低下等。在驳杂且品质参差不齐的前端开发环境中，这些问题都会使咱们在开发利用时，耗费大量的工夫和反复编码，而无奈专一于外围业务。岂但耗时、耗力，加剧软件开发老本，更可能因为外部环境的变更，使零碎的稳定性受到冲击，使前期保护老本飙升。
总结来说，开发前端表格次要有三个技术难点：性能、内存耗费和可靠性。
为了应答这些技术难点，葡萄城联合了多年来的表格开发技术教训，推出了一款可晋升零碎性能、可靠性，升高内存耗费的纯前端表格控件 —— SpreadJS。
葡萄城 SpreadJS 的表格控件技术
针对前端表格开发的三大技术难点：性能、内存耗费和可靠性，SpreadJS 别离提出了应答措施：
- 基于双缓存画布绘制引擎，SpreadJS 实现了极高的解决性能
- 基于行模式的稀松矩阵存储策略，SpreadJS 可大幅节俭内存耗费
- 基于计算引擎技术，SpreadJS 可实现稳固牢靠的利用零碎
1. 基于双缓存画布绘制引擎，实现性能晋升
在企业的利用中，数据是惟一的骨干，而作为数据载体的表格，常常被“吐槽”卡顿，UI 界面“假死”，界面操作不晦涩等。
引起这些问题的症结在于浏览器渲染引擎的根底原理：当界面元素越多，浏览器的渲染工夫会显著增长，内存耗费会越大。
举例来说，古代应用程序为了谋求更好的用户体验，须要对 UI 界面重复优化，而频繁的批改界面 UI 元素，将引发屡次浏览器重绘。在这个过程中，UI 元素的创立及批改，会激活外部垃圾回收机制，影响数据处理效率。
除此之外，前端开发环境的多样化、各类高 DPI 设施、手机、平板、4K 显示屏、企业大屏等，这些无不减轻了企业应用零碎的解决累赘。
对于常常用于展现大数据量的表格来说，性能至关重要。也就是说，任何基于表格开发的利用零碎，必须满足以最低的资源耗费，实现高速渲染和刷新。
为此，SpreadJS 纯前端表格控件引入了 Canvas 绘制模型和双缓存画布技术，具体实现形式如下。
Canvas 绘制模型
因为传统的表格组件应用 DOM 的形式展现表格数据，无论在 table，还是 div 中，简单的 UI 都须要大量的 DOM 渲染。因而，在执行更新、滚动等操作时，须要不停的销毁、创立 DOM，这无形中减少了大量有效计算。
为了解决这个问题，前端框架 React 和 Vue3 均采纳了虚构 DOM 的形式，而 SpreadJS 则采纳了一种更为先进的形式——HTML5 Canvas 绘制。
应用 Canvas 绘制，SpreadJS 不仅无需反复创立和销毁 DOM 元素，在画布的绘制过程中，更是突破了 DOM 元素渲染对 UI 的诸多限度。SpreadJS 能够绘制品种更为丰盛的 UI 元素，如线形、非凡图形等，通过画法逻辑，还能够实现更加精准的 UI 界面渲染，解决了浏览器差别造成的款式误差。
但如果只应用一个画布进行渲染，那么每次绘制时，不论是主体图层还是装璜图层，都须要通过画法逻辑将所有元素进行绘制，这显然是低效的。
双缓存画布技术
为此，SpreadJS 又引入了双缓存画布的机制，将不易扭转的主体图层绘制在缓存画布中，在产生渲染行为时，只须要将缓存画布中的主体图层间接通过图像克隆的形式绘制在主画布上，并附加绘制装璜图层元素，便可大大优化整个绘制性能。
SpreadJS 双缓存画布的技术特点：
- 相似油画的分层绘制
SpreadJS 的绘制引擎基于油画的绘制原理，分为主体图层和装璜图层，主体图层渲染长久的、不易扭转的元素，例如背景，单元格，表格线等。装璜图层则渲染常变性元素，如抉择框、拖拽框、悬浮成果等。
- 应用缓存画布
当产生动静绘制，如表格滚动时，SpreadJS 会将主画布清空，从缓存画布中依据行为上下文进行画布偏移，将偏移后的图层间接绘制在主画布上，再在主画布上绘制残余局部，使整个表格的滚动过程更加晦涩。
2. 基于行模式的稀松矩阵存储策略，大幅节俭内存耗费
尽管没有明文规定，但在业界的独特认知里，浏览器会对繁多线程进行内存限度，例如 64 位的 chrome，每个 tab 页的内存耗费不容许超过 4G，在手持设施上，这个限度则更为显著，例如 iPhone 6s 为 1G，而 iPhone 7 为 2G。
这个限度，在单页面利用不成熟的十几年前，不会成为问题。因为，那时大家所关注的，还是如何晋升后端的解决性能，前端只是一种动态的网页表达方式。
随着前端工程化的高速倒退，各种前端工程脚手架日渐成熟，WebComponent 规范被提上日程，企业开始由 C / S 向 B / S 利用转型。这就要求前端开发者，须要面对单线程解决简单业务数据的挑战。这里的简单，不仅仅是数据量大，更是数据状态的解决。如何高效的解决数据的前后端交互，如何疾速响应数据变更及数据回滚呢？
为此，SpreadJS 又提出了一个卓有成效的解决方案——稀松矩阵。
对于表格，惯例的存储形式是数组，如二维数组或对象数组。在类 Excel 的电子表格中，单元格内容是零散的，也就是说在 Sheet 中会呈现大量空单元格，而这些空单元格，同样会占用内存空间。
对于电子表格这种涣散的文档构造，SpreadJS 采纳了稠密矩阵存储模型（Sparse Array) 来保留数据。
相较于传统的链式存储或数组存储，稠密矩阵存储构建了基于行索引的数据字典，在涣散布局的表格数据中，稠密矩阵只会对非空数据进行存储，而不须要对空数据开拓额定的内存空间。
这种非凡的存储策略，不仅节俭了内存耗费，也使得数据片段化变得更加容易。利用 SpreadJS，能够随时框取整个数据层中的一片数据，进行序列化或反序列化。
借助这个个性，开发者甚至能够随时替换或复原整个存储构造中的任何一个级别的节点，实现高效的数据回滚和数据恢复。
3. 撑持简单逻辑运算的计算引擎，实现稳固牢靠的利用零碎
公式，是类 Excel 电子表格中的重要性能，其宽泛的利用于迷信、财务、金融、制作等畛域。SpreadJS 反对 450 多种公式函数，同时还提供自定义公式和异步公式函数。
外表看似简略的 Excel 公式，却具备高阶编程语言的所有个性，如语法分析、解析、运算、执行等。
当用户设置一个公式到表格中，计算引擎会将其解析为一个中断表达式，如公式“SUM(A1:B1, 3/E1, C1) + 2*(D1 – 1)”，当通过计算引擎的解析后，会在内存中以树型构造进行存储，这个树型构造被咱们称为表达式树。表达式树的生成，是后续构建计算依赖链的要害。
当一个公式被解析为表达式树后，计算引擎将依据运算上下文为其构建运算依赖链。运算依赖链的目标是为了按需计算，当表格内容发生变化时，只有被影响的表达式树会进行运算，而运算的根据就是依赖链。
如上图所示，这是 SpreadJS 的计算引擎在构建计算依赖链时的一个简略的流程图，表达式树从计算存储模型中找到对应的根节点以及根节点标识，随后遍历整个表达式树，找出其余依赖标识，构建依赖关系。
当整个依赖链中的任意节点发生变化时，沿着这条依赖链，SpreadJS 会查找依赖节点并进行重算，这个过程中，没有在依赖链中的节点是不会产生重算计算的，也就是咱们所说的脏值运算。
利用这样的机制，SpreadJS 大大晋升了整个表格的运算速度，给用户更好的应用体验和更加精准的运算后果。
除了绘制引擎、存储策略和计算引擎外，SpreadJS 还实现了更多技术细节，例如触摸反对、富文本反对、前端 Excel 导入导出、JSON 存储等，而这些技术点，承载了葡萄城数年来在表格控件的开发技术和长期服务于开发者的教训积攒。
SpreadJS 广泛应用于各行业企业信息化零碎开发
目前，SpreadJS 已广泛应用于各行业的信息化零碎开发中，满足表格文档协同编辑、数据填报、类 Excel 报表设计等业务场景，帮忙华为、苏宁易购、天弘基金、远光软件等各畛域龙头企业，搭建出性能和布局均高度相似于 Excel 的软件系统，减速这类信息系统的交付。
以华为勘验设计平台的零碎搭建为例：
基于 SpreadJS 开发的勘验设计平台，承载了华为寰球业务（基站）的布局勘察设计工作，借助 SpreadJS 跨平台利用嵌入的个性，华为将原先应用 Excel 作为设计模板的形式降级为在线填报，解决了模板不对立、用料数据不统一、文件难以治理的问题，还保留了 Excel 的数据计算能力，让所有模板和数据均可在服务器中存储并治理。
局部葡萄城单干客户
对于 SpreadJS 的产品介绍及利用案例，欢送拜访葡萄城官网理解更多。
总结
葡萄城自 1980 年成立以来，始终专一于开发技术畛域，透彻了解开发者所需，极致谋求产品细节，通过数十年的打磨，推出了高度复刻 Excel 性能和应用体验的纯前端表格控件 SpreadJS，可完满匹配在线办公场景和前端表格零碎开发需要。
将来，葡萄城将持续秉承“赋能开发者”使命，反对和赋能所有具备翻新精力的开发者，激发开发者的潜能，反对客户的胜利，共创全新的将来。
