Ellia.Duan 发表于 2023-11-15 17:26:59

自定义单元格设置样式性能优化

本帖最后由 Ellia.Duan 于 2023-11-15 17:37 编辑

论坛中有很多在单元格样式上如何优化性能的文章。

1、常见的挂起绘制与恢复绘制,如下代码
spread.suspendPaint();
spread.resumePaint();
2、在列上面设置样式,如下文章
https://gcdn.grapecity.com.cn/fo ... 39271&fromuid=59119

如果每个单元格都可能存在个性化的渲染内容,不同的样式交互等。
初始化渲染的时候,每个格子都可能需要重新设置样式和cellType,于是调用了大量的cell.font、cell.backColor、cell.cellType等方法
这样在大数据量的场景,例如20列*5000行的数据。如下图所示:大概渲染了44秒

加上上文提到的方案一初始化渲染还是非常的慢,而由于个性化渲染等问题无法用上文提到的方案二。为此如何优化这种场景下的渲染呢?
可以创建一个Style设置好了之后调用setStyle
代码改为:
   var cellType = new FivePointedStarCellType();
            for (let i = 0; i < 5000; i++) {
                for (let j = 0; j < 20; j++) {
                  var style = new GC.Spread.Sheets.Style();
                  style.backColor = "red";
                  style.vAlign = 1;
                  style.hAlign = 1;
                  style.font = 'normal normal 14px Microsoft Yahei';
                  const lineColor = '#333';
                  const lineStyle = 2;
                  const border = new spreadNS.LineBorder;
                  border.color = lineColor;
                  border.style = lineStyle;
                  style.borderRight = border;
                  style.borderBottom = border;
                  style.cellType = cellType;
                  sheet.setStyle(i, j, style);
                }
            }
渲染时间为4秒,速度提升了10倍



页: [1]
查看完整版本: 自定义单元格设置样式性能优化