批量设置单元格值的性能优化

收藏

本帖最后由 Richard.Ma 于 2024-5-8 10:56 编辑

在给一个单元格区域设置单元格值的时候，我们一般通过循环行列来设置单元格值

sheet.setValue(rowindex,columnindex,value)

复制代码

或者给区域设置数组

sheet.setArray(0,0,array)

复制代码

当行列数较大的时候，会发现设置的速度很慢。
以20列200000行为例进行测试
创建数组

var array=[];
for (let r = 0; r < 200000; r++) {
var row=[];
for (let c = 0; c < 20; c++) {
row.push(r+c);
}
array.push(row);
}

复制代码

通过setArray设置给sheet需要7.2s，这个时间确实比较慢

console.time('setarray');
sheet.setRowCount(20000);
sheet.setArray(0, 0, array);
console.timeEnd('setarray');

复制代码

接下来，通过下面的几个步骤来进行优化

1.加上挂起/恢复绘制

console.time('setarray');
workbook.suspendPaint();
sheet.setRowCount(20000);
sheet.setArray(0, 0, array);
workbook.resumePaint();
console.timeEnd('setarray');

复制代码

耗时7171ms，看起来在这个场景里面没有什么优化

2.加上挂起/恢复事件

console.time('setarray');
<blockquote>workbook.suspendPaint();

复制代码

耗时: 744 ms，优化效果明显

3.继续给加上挂起计算引擎和挂起脏数据

console.time('setarray');
workbook.suspendPaint();
workbook.suspendEvent();
workbook.suspendCalcService();
sheet.suspendDirty();
sheet.setRowCount(20000);
sheet.setArray(0, 0, array);
sheet.resumeDirty();
workbook.resumeCalcService();
workbook.resumeEvent();
workbook.resumePaint();
console.timeEnd('setarray');

复制代码

耗时: 666ms，相比下仍有优化效果

总结：
在对较大区域的单元格设置值的时候，通过setArray配合绘制，事件挂起，脏数据挂起等方法可以让设置速度有数量级的提升。避免页面卡死

更多性能方面的优化说明，也可以参考产品文档中的最佳实践部分
https://demo.grapecity.com.cn/spreadjs/help/docs/BestPractices

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

批量设置单元格值的性能优化

0 个回复

浏览过的版块

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人