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

收藏 · 2023-11-15 17:26 上传

本帖最后由 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秒
image.png809933776.png

加上上文提到的方案一初始化渲染还是非常的慢，而由于个性化渲染等问题无法用上文提到的方案二。为此如何优化这种场景下的渲染呢？
可以创建一个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倍
image.png474183349.png

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

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

0 个回复

SpreadJS 认证

SpreadJS 高级认证