油炸小可爱|SpreadJS 前端表格技术分享,硬核干货:葡萄城

表格作为数据呈现的一种基本方式 , 在各类软件系统都发挥着重要的作用 。 在移动互联时代 , 即便再复杂的数据通过"表格"的整理 , 都可以清晰的呈现给用户 , 并支持用户从多个维度查看、筛选和修改 。 不论是应对文档、报告、凭证 , 还是票据 , 表格都能够附加存储更多的样式信息 , 尤其对离散式数据存储更加高效 。
如今 , 企业开始纷纷尝试信息化转型 , 前端、后端、中台、云 , 这些概念也逐渐变得家喻户晓 , 在几乎所有的B端产品中 , 表格作为一种交互式组件 , 越发受到欢迎 。
不过即便如此 , 表格也经常因为样式复杂、操作繁琐等因素 , 在用户使用时造成诸多体验问题 , 尤其在Web项目中 , 表格技术时常受限于前端性能制约 。
那么 , 有没有一种办法 , 可以帮助开发者突破前端表格技术的困境 , 实现关键技术落地呢?
2020年6月30日 , 作为全球领先的软件开发技术提供商 , 葡萄城举办了"赋能·智变"线上品牌战略发布会 。 本次会议上 , 葡萄城正式发布"赋能开发者"业务使命 , 并就前端表格开发等技术话题进行了分享 。
前端表格为开发者带来的困扰
例如 , 多浏览器差异、浏览器沙箱机制、内存访问受限、客户端性能低下等 。 在驳杂且质量参差不齐的前端开发环境中 , 这些问题都会使我们在开发应用时 , 消耗大量的时间和重复编码 , 而无法专注于核心业务 。 不但耗时、耗力 , 加剧软件开发成本 , 更可能因为外部环境的变更 , 使系统的稳定性受到冲击 , 使后期维护成本飙升 。
总结来说 , 开发前端表格主要有三个技术难点:性能、内存消耗和可靠性 。
为了应对这些技术难点 , 葡萄城结合了近20年的表格控件开发经验 , 推出了一款可提升系统性能、可靠性 , 降低内存消耗的 。
葡萄城SpreadJS的表格控件技术
基于双缓存画布绘制引擎 , SpreadJS实现了极高的处理性能基于行模式的稀松矩阵存储策略 , SpreadJS可大幅节省内存消耗基于计算引擎技术 , SpreadJS可实现稳定可靠的应用系统1.基于双缓存画布绘制引擎 , 实现性能提升
引起这些问题的症结在于浏览器渲染引擎的基础原理:当界面元素越多 , 浏览器的渲染时间会显著增长 , 内存消耗会越大 。
举例来说 , 现代应用程序为了追求更好的用户体验 , 需要对UI界面反复优化 , 而频繁的修改界面UI元素 , 将引发多次浏览器重绘 。 在这个过程中 , UI元素的创建及修改 , 会激活内部垃圾回收机制 , 影响数据处理效率 。
除此之外 , 前端开发环境的多样化、各类高DPI设备、手机、平板、4K显示屏、企业大屏等 , 这些无不加重了企业应用系统的处理负担 。
对于经常用于展示大数据量的表格来说 , 性能至关重要 。 也就是说 , 任何基于表格开发的应用系统 , 必须满足以最低的资源消耗 , 实现高速渲染和刷新 。