使用SpreadJS完成100万个单元格性能优化

需求：在SpreadJS使用过程中，经常会通过setArry方式写入数据

1. sheet.setArray(2, 1, dataArray1, false);
   
2. sheet.setArray(0, dataArray1[0].length + 1, dataArray2, false);
   
3. sheet.setArray(3, dataArray1[0].length + 1, dataArray3, false);

复制代码

然后通过getRange（）,后对区域通过backColor（），foreColor（），formatter（），hAlign(),vAlign()方法对区域进行样式设计

1. sheet.getRange(0, 0, rowCount, columnCount, GC.Spread.Sheets.SheetArea.viewport).backColor("#fff");
   
2. sheet.getRange(2, 1, 1, columnCount, GC.Spread.Sheets.SheetArea.viewport).foreColor('#000')；
   
3. sheet.getRange(0, 0, rowCount, columnCount, GC.Spread.Sheets.SheetArea.viewport).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
   
4. sheet.getRange(0, 0, rowCount, columnCount, GC.Spread.Sheets.SheetArea.viewport).vAlign(GC.Spread.Sheets.VerticalAlign.center);
   
5. sheet.getRange(1, column1 + 1, 2, columnSplit, GC.Spread.Sheets.SheetArea.viewport).backColor("#C9DEF4");
   
6. sheet.getRange(3, column1 + 1, row1, columnSplit, GC.Spread.Sheets.SheetArea.viewport).backColor("#DFDFDF");
   
7. sheet.getRange(1, columnSplit + column1 + 1, 2, columnCount, GC.Spread.Sheets.SheetArea.viewport).backColor("#CDFFCD");

复制代码

// /* 可编辑颜色 */

1. editArr.forEach(item => {
   
2.                sheet.getRange(item, columnSplit + column1 + 1, 1, columnCount, GC.Spread.Sheets.SheetArea.viewport).backColor("#FCE6C7");
   
3.                 })
   
4. sheet.getRange(3, column1 + 1, row1, columnCount, GC.Spread.Sheets.SheetArea.viewport).backColor("#DFDFDF");
   
5. sheet.getRange(0, 0, 3, columnCount, GC.Spread.Sheets.SheetArea.viewport).font("bold 13px arial");
   
6. sheet.getRange(3, 0, rowCount, columnCount, GC.Spread.Sheets.SheetArea.viewport).font("13px arial");
   
7. sheet.getRange(0, 0, 13, columnCount, GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder("#D7D7D7", GC.Spread.Sheets.LineStyle.thin), { all: true });

复制代码

页面显示效果如下：

存在问题：
由于整个sheet，10000多行，100多列，使用getRange（）对进行样式和字体设置，相当于遍历设置样式，整个页面加载时间较长：

优化思路
1.将字体水平居中，垂直居中通过setDefaultStyle（）设置：

1. let sytleAlignment = new GC.Spread.Sheets.Style();
   
2. sytleAlignment .hAlign = GC.Spread.Sheets.HorizontalAlign.center;
   
3. sytleAlignment .vAlign = GC.Spread.Sheets.VerticalAlign.center;
   
4. sytleAlignment .backColor = "#fff";
   
5. sheet.setDefaultStyle(sytleAlignment);

复制代码

2.将较大区域通过setStyle（），设置在列上，如下图的3，和4区域，行数都超过了10000行，然后将小区域部分通过getRange（）方式设置样式和字体

部分代码如下：

1. let styleBackColor = new GC.Spread.Sheets.Style();
   
2. styleBackColor.backColor  = "#DFDFDF"
   
3. styleBackColor .hAlign = GC.Spread.Sheets.HorizontalAlign.center;
   
4. styleBackColor .vAlign = GC.Spread.Sheets.VerticalAlign.center;
   
5. for(let i=column1 + 1;i<columnCount;i++){
   
6.          sheet.setStyle(-1,i,styleBackColor);
   
7.                 }
   
8. sheet.getRange(0,column1 + 1,1,columnCount,GC.Spread.Sheets.SheetArea.viewport).backColor('#fff');

复制代码

3.优化完加载时间：

总结
1.在进行样式设置时，如果所有单元格都适用，优先使用setDefaultStyle（）设置
2.对大片区域进行样式设置时，优先使用setStyle（）将样式设置在列上
3.先对大片区域进行样式设置，再对小部分区域进行样式设置，覆盖样式（注意样式的优先级）
附件：
附件中“测试数据_原版.html”为优化前源码，
附件中的“测试数据.html”为优化后源码