江苏龙网

  1. 首页 > 人文 > >

油炸小可爱|SpreadJS 前端表格技术分享，硬核干货：葡萄城( 二 )


为此 ， SpreadJS纯前端表格控件引入了Canvas绘制模型和双缓存画布技术 ， 具体实现方式如下 。
由于传统的表格组件使用DOM的方式展示表格数据 ， 无论在table ， 还是div中 ， 复杂的UI都需要大量的DOM渲染 。 因此 ， 在执行更新、滚动等操作时 ， 需要不停的销毁、创建DOM ， 这无形中增加了大量无效计算 。
为了解决这个问题 ， 前端框架React和Vue3均采用了虚拟DOM的方式 ， 而SpreadJS则采用了一种更为先进的方式——HTML5Canvas绘制 。
使用Canvas绘制 ， SpreadJS不仅无需重复创建和销毁DOM元素 ， 在画布的绘制过程中 ， 更是打破了DOM元素渲染对UI的诸多限制 。 SpreadJS可以绘制种类更为丰富的UI元素 ， 如线形、特殊图形等 ， 通过画法逻辑 ， 还可以实现更加精准的UI界面渲染 ， 解决了浏览器差异造成的样式误差 。
但如果只使用一个画布进行渲染 ， 那么每次绘制时 ， 不论是主体图层还是装饰图层 ， 都需要通过画法逻辑将所有元素进行绘制 ， 这显然是低效的 。
双缓存画布技术
为此 ， SpreadJS又引入了双缓存画布的机制 ， 将不易改变的主体图层绘制在缓存画布中 ， 在发生渲染行为时 ， 只需要将缓存画布中的主体图层直接通过图像克隆的方式绘制在主画布上 ， 并附加绘制装饰图层元素 ， 便可大大优化整个绘制性能 。
SpreadJS双缓存画布的技术特点：
类似油画的分层绘制 。SpreadJS的绘制引擎基于油画的绘制原理 ， 分为主体图层和装饰图层 ， 主体图层渲染持久的、不易改变的元素 ， 例如背景 ， 单元格 ， 表格线等 。 装饰图层则渲染常变性元素 ， 如选择框、拖拽框、悬浮效果等 。
使用缓存画布 。当发生动态绘制 ， 如表格滚动时 ， SpreadJS会将主画布清空 ， 从缓存画布中根据行为上下文进行画布偏移 ， 将偏移后的图层直接绘制在主画布上 ， 再在主画布上绘制剩余部分 ， 使整个表格的滚动过程更加流畅 。
2.基于行模式的稀松矩阵存储策略 ， 大幅节省内存消耗
这个限制 ， 在单页面应用不成熟的十几年前 ， 不会成为问题 。 因为 ， 那时大家所关注的 ， 还是如何提升后端的处理性能 ， 前端只是一种静态的网页表达方式 。
随着前端工程化的高速发展 ， 各种前端工程脚手架日渐成熟 ， WebComponent标准被提上日程 ， 企业开始由C/S向B/S应用转型 。 这就要求前端开发者 ， 需要面对单线程处理复杂业务数据的挑战 。 这里的复杂 ， 不仅仅是数据量大 ， 更是数据状态的处理 。 如何高效的解决数据的前后端交互 ， 如何快速响应数据变更及数据回滚呢？
为此 ， SpreadJS又提出了一个行之有效的解决方案——稀松矩阵 。
对于电子表格这种松散的文档结构 ， SpreadJS采用了稀疏矩阵存储模型（SparseArray)来保存数据 。


推荐阅读


上一篇：互联网的那点事er|三星、华为背后，有一中国科技巨头，靠卖零件年入超24亿，原创

下一篇：焦点热议|iPhone12难产，再次延期到11月份上市，高通官宣5G