【16.1】SpreadJS性能问题

产品：SpreadJS
版本：16.1


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

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

好的，那就先结贴了，后续有其他问题的话随时开新帖提问哈。

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

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

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

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

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

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

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

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

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

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

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

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

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

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


16.1.4: https://jscodemine.grapecity.com/sample/YNWTdjrMfEK72MTKCDr1Fg/


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

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

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

1. function renderData() {
   
2.     spread.suspendPaint();
   
3.     var cellType = new FivePointedStarCellType();
   
4.     data.forEach((rowData, row) => rowData.forEach((v, col) => {
   
5.         /*const cell = sheet.getCell(row, col);
   
6.         // 更新单元格样式，每个单元格可能不同，这里设置成一样的
   
7.         cell.backColor('red');
   
8.         // cell.text(v);
   
9.         cell.vAlign(1).hAlign(1);
   
10.         cell.font('normal normal 14px Microsoft Yahei');
    
11.         // 边框，每个单元格可能不同，这里设置成一样的
    
12.         const lineColor = '#333';
    
13.         const lineStyle = 2;
    
14.         const border = new spreadNS.LineBorder;
    
15.         border.color = lineColor;
    
16.         border.style = lineStyle;
    
17.         cell['borderRight'](border);
    
18.         cell['borderBottom'](border);
    
19. 
    
20.         // 更新单元格类型，每个单元格可能不同，这里设置成一样的
    
21.         cell.cellType(
    
22.             new FivePointedStarCellType()
    
23.         );*/
    
24.         var style = new GC.Spread.Sheets.Style();
    
25.         style.backColor = "red";
    
26.         style.vAlign = 1;
    
27.         style.hAlign = 1;
    
28.         style.font = 'normal normal 14px Microsoft Yahei';
    
29.         const lineColor = '#333';
    
30.         const lineStyle = 2;
    
31.         const border = new spreadNS.LineBorder;
    
32.         border.color = lineColor;
    
33.         border.style = lineStyle;
    
34.         style.borderRight = border;
    
35.         style.borderBottom = border;
    
36.         style.cellType = cellType;
    
37.         sheet.setStyle(row, col, style);
    
38.     }));
    
39.     spread.resumePaint();
    
40. }

复制代码

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