填充报表数据时如何提高性能

收藏

本帖最后由 innerwang 于 2024-5-23 19:36 编辑

场景如下：

用 SpreadJS 编辑一个模板，模板中包含一个表格，这个表格实际只会有2行，一行是表头，另一行是各个模板字段，如图
image.png772409972.png

实际展示时，会将拿到的数据(二维数组)来扩充上述第二行的模板字段
image.png241789550.png

扩充数据的代码实现如下：

const firstDataRowHeight = sheet.getRowHeight(row + 1)
const needSyncRowHeight = firstDataRowHeight !== sheet.defaults.rowHeight
const setValues = (values, startRow) => {
sheet.suspendPaint()
sheet.suspendEvent()
values.forEach((v, rowIdx) => {
sheet.copyTo(row + 1, col, startRow + rowIdx, col, 1, colCount, window.GC.Spread.Sheets.CopyToOptions.all)
sheet.setArray(startRow + rowIdx, col, [ v ])
if (needSyncRowHeight) {
sheet.setRowHeight(startRow + rowIdx, firstDataRowHeight)
}
})
sheet.resumeEvent()
sheet.resumePaint()
}

复制代码

目前填充 500行，58列的性能在 500ms左右，对应配置为 Mac M1, 内存 16GB，遇到比较差的硬件配置电脑时，就会卡顿十分明显，能帮看看如何提高性能吗？

备注：尝试了 suspendCalcService() suspendDirty() 没什么改善

Ellia.Duan · Ellia.Duan

本帖最后由 Ellia.Duan 于 2024-5-24 09:35 编辑

您好，根据您提供的代码，做了一个测试demo ，已上传，
测试了下，对500行数据，58列数据设置在table上，用时1S 。

image.png344934691.png

您可以在此demo基础上，再完善下您的代码，使其可以复现。

innerwang · innerwang

Ellia.Duan 发表于 2024-5-24 09:34
您好，根据您提供的代码，做了一个测试demo ，已上传，
测试了下，对500行数据，58列数据设置在table上， ...

你好，使用您提供的 demo，我这边运行时间不到 400ms

image.png329163817.png

您也提到您的电脑需要1s, 也刚好证明了同样的代码在不同的电脑上执行，性能差异巨大，就基于现在的demo ，想问是否有优化的空间呢？

Ellia.Duan · Ellia.Duan

不好意思，回复晚了，我将深入调研下此问题，有进展会联系您。

Ellia.Duan · Ellia.Duan

您好，重新看了下代码，您或许可以考虑优化下CopyToOptions选项。
因为您在for循环中，会进行setArray()也就是说，会进行数据填充，所以没有必要进行

sheet.copyTo(row + 1, col, startRow + rowIdx, col, 1, colCount, GC.Spread.Sheets.CopyToOptions.all)

复制代码

由于不太清楚您的实际业务需求，我这里将其设置为style后，性能提升了很多

sheet.copyTo(row + 1, col, startRow + rowIdx, col, 1, colCount, GC.Spread.Sheets.CopyToOptions.style)

复制代码

以及如果有大量的高度需要重新调整，可以直接修改默认值高度。
最后，setDataSource()性能要好于setArray() 可以考虑数据绑定。

		自动登录	找回密码
密码			立即注册

[处理中] 填充报表数据时如何提高性能