【16.1】SpreadJS性能问题

WilliamChang

本帖最后由 Joestar.Xu 于 2023-11-2 10:27 编辑

产品：SpreadJS
版本：16.1

场景描述：
每个格子都可能存在个性化的渲染内容，不同的样式交互等
我们定义的一些自定义的单元格类型
初始化渲染的时候，每个格子都可能需要重新设置样式和cellType，于是调用了大量的cell.font、cell.backColor、cell.cellType等方法
这样在大数据量的场景，例如20列*5000行的数据，初始化渲染会非常的慢
渲染前后已经调用了spread.suspendPaint()和spread.resumePaint();
请问这种场景下有什么优化的方案吗？

已经尝试过滚动局部渲染，
通过spreadSheetObj.getViewportTopRow等方法收集可视区域信息，初始化仅处理可视区域的单元格
监听滚动事件，滚动的时候更新处理新的可视区域的单元格，但是这种方式更新的时候也十分卡顿
image.png271004943.png

WilliamChang · WilliamChang

你好，我看了一下，可以试一下创建一个Style设置好了之后调用setStyle. 参考代码：

function renderData() {
spread.suspendPaint();
var cellType = new FivePointedStarCellType();
data.forEach((rowData, row) => rowData.forEach((v, col) => {
/*const cell = sheet.getCell(row, col);
// 更新单元格样式，每个单元格可能不同，这里设置成一样的
cell.backColor('red');
// cell.text(v);
cell.vAlign(1).hAlign(1);
cell.font('normal normal 14px Microsoft Yahei');
// 边框，每个单元格可能不同，这里设置成一样的
const lineColor = '#333';
const lineStyle = 2;
const border = new spreadNS.LineBorder;
border.color = lineColor;
border.style = lineStyle;
cell['borderRight'](border);
cell['borderBottom'](border);
// 更新单元格类型，每个单元格可能不同，这里设置成一样的
cell.cellType(
new FivePointedStarCellType()
);*/
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(row, col, style);
}));
spread.resumePaint();
}

复制代码

我试了一下，改之后renderData只需要一秒多

Ellia.Duan · Ellia.Duan

您好，通过您的描述，我们在论坛中提到的优化方案，您都测试了下，结果也没有太好的效果。
所以您可以上传一个可以复现您问题的demo ,我们根据您的数据，深入调研下，看是否可以解决您的问题。

front-sl · front-sl

Ellia.Duan 发表于 2023-11-1 18:00
您好，通过您的描述，我们在论坛中提到的优化方案，您都测试了下，结果也没有太好的效果。
所以您可以上传 ...

我在SpreadJS的两个版本上做了下实验
16.0.1: https://jscodemine.grapecity.com/sample/OTGHHVVOLEqPUBVQph7Jqw/
image.png164022826.png

16.1.4: https://jscodemine.grapecity.com/sample/YNWTdjrMfEK72MTKCDr1Fg/
image.png290068969.png

完全相同的代码，16.1.4的性能表现比16.0.1的差很多
我们的场景就是基于16.1.4版本开发的，所以特别慢，但是在大数据量的场景下，16.0.1的性能效果也不够好，您看下还有优化的空间吗

Ellia.Duan · Ellia.Duan

您好，问题收到，需要调研下。

Ellia.Duan · Ellia.Duan

您好，看了您的代码。注意到您的这三句注释：

意思就是每一个单元格的背景，边框，类型都有可能不一样是吗？
我们有一篇文章是优化样式的，在列上面设置样式，
https://demo.grapecity.com.cn/sp ... erformance-optimize
您也可以参考这篇文章
https://gcdn.grapecity.com.cn/showtopic-196722-1-1.html
除此之外，没有更好的优化方案了。

front-sl · front-sl

Ellia.Duan 发表于 2023-11-3 10:08
您好，看了您的代码。注意到您的这三句注释：

意思就是每一个单元格的背景，边框，类型都有可能不一样是 ...

对，我们的场景就是每个单元格的样式和交互都可能不一样，不适用批量设置（在列上或者划定区域）样式。

setDefaultStyle是统一设置样式的，有统一设置单元格类型的方法吗，不用每个单元格重新设置自定义的cellType。

Ellia.Duan · Ellia.Duan

您好，可以参考楼上回复，进行优化。

front-sl · front-sl

WilliamChang 发表于 2023-11-3 10:43
你好，我看了一下，可以试一下创建一个Style设置好了之后调用setStyle. 参考代码：

感谢，这种实现方式性能确实提升了很多

front-sl · front-sl

Ellia.Duan 发表于 2023-11-3 11:06
您好，可以参考楼上回复，进行优化。

嗯嗯，也感谢您提供的帮助～

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

[已处理] 【16.1】SpreadJS性能问题

最佳答案

10 个回复

SpreadJS 认证

SpreadJS 高级认证