对于表格在前端的渲染,我们都知道前端复杂的DOM,会加重浏览器渲染负担,而表格这种密集的数据展示形式必然会需要大量的DOM来呈现内容。
点击获取SpreadJS工具下载
在表格渲染方式上,我们从一开始就采用了HTML 5 Canvas绘制的方式。
我们把Canvas称之为画布,因为整个画布就是一个DOM。这样不仅解决了因界面复杂而导致的DOM元素过多的问题,更是打破了DOM元素渲染对UI的诸多限制,例如线形,特殊图形等,通过画法逻辑,更加精准的UI界面渲染,同时还解决了浏览器兼容性的问题。
这种Canvas渲染的方式可以说是现在前端渲染这种内容丰富表格、图表的主流方式。
在绘制时我们采用了分层绘制。整个绘制引擎根据油画绘制原理,分为主体图层和装饰图层,主题图层将会渲染持久的,不会轻易改变的元素,例如背景,单元格,表格线等。而装饰图层则会渲染常变性元素,例如选择框,拖拽框,悬浮效果等。
另外,整个的绘制过程并不是从数据层(Model)直接到视图层(View)的。我们根据表格内容的特殊性,实现了根据视图层形状,从数据层组合出一层专属视图层的视图数据(ViewModel),在配合以上的双缓存画布绘制机制,完成整个表格按需绘制的需求,并缓存绘制结果,进一步提升绘制性能。
主体图层不是直接绘制在用户能看到的主画布上,而是绘制在一个看不见的缓存画布上。在需要渲染时,只需要讲缓存画布的内容克隆到主画布上,再附加上装饰图层元素。这样,当表格需要更新时候,比如单元格背景改变,只需要在克隆缓存画布后重绘对应单元格内容即可。
再以表格滚动演示下双缓存画布带来的优势。
当表格滚动结束,需要重绘,我们会将主画布清空,从缓存画布中根据行为上下文进行画布偏移,将偏移后的图层直接绘制在主画布上,随后在主画布上绘制偏移后的剩余部分,最后更新缓存。使用缓存画布,大大提升了绘制性能,使整个滚动过程更加流畅、顺滑。
SpreadJS | 下载试用
纯前端表格控件SpreadJS,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,备受华为、苏宁易购、天弘基金等行业龙头企业的青睐,并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能,满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求,极大的降低企业研发成本和项目交付风险。
本文转载自葡萄城
如果觉得《纯前端表格控件SpreadJS - 轻松实现电子表格渲染》对你有帮助,请点赞、收藏,并留下你的观点哦!