纯前端表格控件SpreadJS使用教程 - 性能优化汇总 SpreadJSjavascript前端
场景:
- 在许多用户的实际应用场景中,常常需要加载几种表单:1)数据量大;2)公式多且复杂。在这些常见的场景中往往需要较多的时间去加载表单,导致每次都需要等待较长的时间,用户体验较差。
- 需要做大量的绘制操作时,表单出现“假死”的情况。
- 较大数据量的表单下,需要将全部单元格进行自适应。
场景1的优化:
- 对于表单的性能表现,我们也在不断地优化,每个版本我们也会针对一些典型的用户场景进行优化,所以新版本会相对于前面的版本性能会有所提升。例如,同一份表单在v11和v14的加载速度也会有所不同。因此,当我们使用的版本相对较旧时,最直接的方案就是升级产品版本。
- 无论是导入Excel还是导入json,其本质都是调用fromJSON将表单反序列化。在默认情况下,为保证数据完整和正确,SpreadJS会自动重算所有公式。因此我们可以通过下面几个属性来优化记载性能。
- 在fromJSON的时候,设置doNotRecalculateAfterLoad以及incrementalLoading这两属性,前者可以告知SpreadJS,不需要在导入后执行重算。开启了这个属性也不用担心,因为正常情况下,无论是Excel还是SpreadJS,公式计算默认都是实时生效的,因此在导入文档时文档数据已经是统一并正确的。后者是v14新增的属性,名为增量加载,通过改属性将在后台加载值和公式时快速显示数据,减少用户的首屏等待时间。可以参考学习指南。https://demo.grapecity.com.cn/sp ... ntal-loading/purejs
参考下面的代码为
spread.fromJSON(workbookObj, { doNotRecalculateAfterLoad:true, incrementalLoading: true });
由于前端性能的限制,在一些比较极端的情况下(百万级别甚至千万级别的公式样式),即使用Excel打开都需要花费大量的时间,那么我们只关心最后展示的数据,可以用下面的属性将样式和公式忽略掉。
spread.fromJSON(workbookObj, { ignoreFormula: true, ignoreStyle: true });
- Workbook的calcOnDemand配置:使用如这句代码所示spread.options.calcOnDemand = true;设置这个属性后告诉计算引擎,按需求执行计算,而不是每次有数据改变都重算所有的公式,同时可以配合上面的option一起使用。
场景2的优化:
对于需要一次大量绘制的情况,可以使用suspendPaint / resumePaint函数来加速渲染性能。
https://demo.grapecity.com.cn/sp ... ook/painting/purejs
场景3的优化:
在这种场景下,与绘制不一样的是,AutoFitRow应该考虑所有可见和不可见的单元格,然后获取getText(getValue+format),考虑SPAN,考虑高优先级选项,以及很多复杂的逻辑,在目前没有太大的空间来提升。在这种情况下,一次自适应大量的单元格,这确实需要花费较多的时间。根据数据集的大小,越大的数据集也会花费更多的时间。但是,如果只是需要显示的时候自适应可以使用附件的workaround。
纯前端表格控件SpreadJS,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,备受华为、苏宁易购、天弘基金等行业龙头企业的青睐,并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能,满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求,极大的降低企业研发成本和项目交付风险。
本文转载自葡萄城
上一篇: Angular UI组件库入门指南 - 如何安装和开始使用(二) AngularKendo UItelerikUI控件
下一篇: nmp安装报错npm ERR errno -4058,npm ERR enoent ENOENT: no such file or directory, open
推荐阅读
-
纯前端表格控件SpreadJS使用教程 - 使用正则表达式进行校验 SpreadJSExcel前端
-
纯前端表格控件 SpreadJS 新手入门指南 - 控件组成 SpreadJSJavascript前端电子表格
-
纯前端表格控件SpreadJS使用教程 - 性能优化汇总 SpreadJSjavascript前端
-
纯前端表格控件SpreadJS使用教程 - 使用正则表达式进行校验 SpreadJSExcel前端
-
纯前端表格控件 SpreadJS 新手入门指南 - 控件组成 SpreadJSJavascript前端电子表格
-
纯前端表格控件SpreadJS新手入门指南 - 下载及安装&目录解读 SpreadJSjavascript前端
-
纯前端表格控件SpreadJS使用教程 - 性能优化汇总 SpreadJSjavascript前端