perf: 复用行列头/数值单元格 以提升百万滚动性能至50FPS (#3222)

* perf: 优化100万数据下的滚动性能

* perf: 优化pivot-chart的滚动性能

* perf: 优化100万数据下的PivotChartDataCell滚动性能

* fix: 媒体渲染场景等异步场景不能复用单元格

* perf: 列头行头滚动性能优化

* perf: 列头行头滚动性能优化

* perf: 字段标记icon情况下优化渲染

* perf: 优化icon的位置渲染

* chore: 更新依赖版本

* perf: 使用g的新版优化性能

* test: 更新快照

* test: 导出超时

* test: 修复测试用例

* test: 修复测试用例

* perf: 使用性能更好的pop

* perf: 提供开关

* perf: 百万滚动场景关闭showDefaultHeaderActionIcon

* perf: updateGrid过程中复用line

* perf: updateGrid过程中复用line

* perf: 设置ClipPath时，不再重新new Rect，而是直接修改已有rect的style

* refactor: 轻微重构相同函数

* fix: 删除错误参数

* perf: 允许用户自定义G的渲染器参数

* refactor: 轻微重构

* refactor: 轻微重构

* fix: 增加兜底分支

* perf: 提升getBackgroundColor性能

* refactor: 完善类型

* perf: 批量设置样式

* perf: 适配新版写法

* perf: 适配新版写法

* refactor: 接受CR意见

* chore: 使用beta版的G

* Revert "chore: 使用beta版的G"

This reverts commit 24cdae0.

* chore: 使用G的新版本

* chore: 增大limit

* refactor: 增加experimentalReuseCell文档

* chore: 修复CodeQL CI问题

Author: Alexzjt

.github/workflows/codeql-analysis.yml

@@ -43,6 +43,8 @@ jobs:
     steps:
     - name: Checkout repository
       uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL

packages/s2-core/__tests__/unit/utils/g-mini-charts-spec.ts

@@ -16,8 +16,7 @@ import {
   scale,
   transformRatioToPercent,
 } from '@/utils/g-mini-charts';
-import type { IElement } from '@antv/g-lite';
-import { forEach, last, map } from 'lodash';
+import { forEach, map } from 'lodash';
 import { data } from 'tests/data/mock-dataset.json';
 import { assembleDataCfg, assembleOptions } from 'tests/util';
 import { createPivotSheet, getContainer } from 'tests/util/helpers';
@@ -411,7 +410,7 @@ describe('Render Chart Shape Tests', () => {
       cell,
     );
 
-    const text = last(cell.getChildren()) as IElement;
+    const text = cell.children.find((child) => child.style.text);
 
     expect(text.attr('text')).toEqual('10.00%');
   });

packages/s2-core/package.json

@@ -74,9 +74,9 @@
   },
   "dependencies": {
     "@antv/event-emitter": "^0.1.3",
-    "@antv/g": "^6.1.28",
-    "@antv/g-canvas": "^2.0.48",
-    "@antv/g-lite": "^2.3.2",
+    "@antv/g": "^6.3.1",
+    "@antv/g-canvas": "^2.2.0",
+    "@antv/g-lite": "^2.7.0",
     "@antv/vendor": "^1.0.11",
     "decimal.js": "^10.5.0",
     "flru": "^1.0.2",
@@ -104,7 +104,7 @@
     {
       "path": "./dist/s2.min.js",
       "import": "{ createComponent }",
-      "limit": "240 kB"
+      "limit": "300 kB"
     },
     {
       "path": "./dist/s2.min.css",

packages/s2-core/src/cell/base-cell.ts

@@ -8,7 +8,7 @@ import type {
   Text,
   TextStyleProps,
 } from '@antv/g';
-import { Group } from '@antv/g';
+import { Group, RectStyleProps } from '@antv/g';
 import {
   each,
   get,
@@ -78,6 +78,7 @@ import {
   renderText,
   updateShapeAttr,
 } from '../utils/g-renders';
+import { batchSetStyle } from '../utils/g-utils';
 import { isLinkFieldNode } from '../utils/interaction/link-field';
 import { isMobile } from '../utils/is-mobile';
 import {
@@ -125,6 +126,8 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
   // interactive control shapes, unify read and manipulate operations
   protected stateShapes = new Map<StateShapeLayer, DisplayObject>();
 
+  protected borders: Map<keyof typeof CellBorderPosition, Line> = new Map();
+
   /* -------------------------------------------------------------------------- */
   /*           abstract functions that must be implemented by subtype           */
   /* -------------------------------------------------------------------------- */
@@ -414,47 +417,70 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
         this.getStyle()?.cell!,
       );
 
-      renderLine(this, { ...position, ...style });
+      const borderStyle = { ...position, ...style };
+
+      if (this.borders.has(type)) {
+        batchSetStyle(this.borders.get(type)!, borderStyle);
+      } else {
+        this.borders.set(type, renderLine(this, borderStyle));
+      }
     });
   }
 
   /**
    * 绘制 hover 悬停，刷选的外框
    */
   protected drawInteractiveBorderShape() {
-    this.stateShapes.set(
+    const style = {
+      ...this.getBBoxByType(CellClipBox.PADDING_BOX),
+      visibility: 'hidden',
+      pointerEvents: 'none',
+    } as RectStyleProps;
+
+    const interactiveBorderShape = this.stateShapes.get(
       'interactiveBorderShape',
-      renderRect(this, {
-        ...this.getBBoxByType(CellClipBox.PADDING_BOX),
-        visibility: 'hidden',
-        pointerEvents: 'none',
-      }),
     );
+
+    if (interactiveBorderShape) {
+      batchSetStyle(interactiveBorderShape, style);
+    } else {
+      this.stateShapes.set('interactiveBorderShape', renderRect(this, style));
+    }
   }
 
   /**
    * 交互使用的背景色
    */
   protected drawInteractiveBgShape() {
-    this.stateShapes.set(
-      'interactiveBgShape',
-      renderRect(this, {
-        ...this.getBBoxByType(),
-        visibility: 'hidden',
-        pointerEvents: 'none',
-      }),
-    );
+    const style = {
+      ...this.getBBoxByType(),
+      visibility: 'hidden',
+      pointerEvents: 'none',
+    } as RectStyleProps;
+
+    const reuseInteractiveBgShape = this.stateShapes.get('interactiveBgShape');
+
+    if (reuseInteractiveBgShape) {
+      batchSetStyle(reuseInteractiveBgShape, style);
+    } else {
+      this.stateShapes.set('interactiveBgShape', renderRect(this, style));
+    }
   }
 
   protected drawBackgroundShape() {
     const { backgroundColor, backgroundColorOpacity } =
       this.getBackgroundColor();
-
-    this.backgroundShape = renderRect(this, {
+    const style = {
       ...this.getBBoxByType(),
       fill: backgroundColor,
       fillOpacity: backgroundColorOpacity,
-    });
+    };
+
+    if (this.backgroundShape) {
+      batchSetStyle(this.backgroundShape, style);
+    } else {
+      this.backgroundShape = renderRect(this, style);
+    }
   }
 
   public renderTextShape(
@@ -464,15 +490,23 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     const text = getDisplayText(style.text, this.getEmptyPlaceholder());
     const shallowRender = options?.shallowRender || this.isShallowRender();
 
-    this.textShape = renderText({
-      group: this,
-      textShape: shallowRender ? undefined : this.textShape,
-      style: {
+    if (this.textShape && !shallowRender) {
+      batchSetStyle(this.textShape, {
         ...style,
         // 文本必须为字符串
         text: `${text}`,
-      },
-    });
+      });
+    } else {
+      this.textShape = renderText({
+        group: this,
+        textShape: shallowRender ? undefined : this.textShape,
+        style: {
+          ...style,
+          // 文本必须为字符串
+          text: `${text}`,
+        },
+      });
+    }
 
     this.addTextShape(this.textShape);
 
@@ -560,16 +594,21 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
       }
 
       const { bottom: maxY } = this.textShape.getBBox();
-
-      this.linkFieldShape = renderLine(this, {
+      const options = {
         x1: startX,
         y1: maxY + 1,
         // 不用 bbox 的 maxX，因为 g-base 文字宽度预估偏差较大
         x2: startX + actualTextWidth,
         y2: maxY + 1,
         stroke: linkFillColor,
         lineWidth: 1,
-      });
+      };
+
+      if (this.linkFieldShape) {
+        batchSetStyle(this.linkFieldShape, options);
+      } else {
+        this.linkFieldShape = renderLine(this, options);
+      }
     }
 
     this.textShape.style.fill = linkFillColor;
@@ -727,13 +766,20 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
       const position = this.getIconPosition();
       const { size } = this.getStyle()!.icon!;
 
-      this.conditionIconShape = renderIcon(this, {
+      const iconCfg = {
         ...position,
         name: attrs?.name!,
         width: size,
         height: size,
         fill: attrs?.fill,
-      });
+      };
+
+      if (this.conditionIconShape) {
+        this.conditionIconShape.reRender(iconCfg);
+      } else {
+        this.conditionIconShape = renderIcon(this, iconCfg);
+      }
+
       this.addConditionIconShape(this.conditionIconShape);
     }
   }
@@ -890,4 +936,8 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
       (m) => m.field === this.getMetaField(),
     )?.renderer;
   }
+
+  public getConditionIntervalShape() {
+    return this.conditionIntervalShape;
+  }
 }

packages/s2-core/src/cell/col-cell.ts

@@ -32,6 +32,7 @@ import {
 } from '../utils/cell/cell';
 import { adjustTextIconPositionWhileScrolling } from '../utils/cell/text-scrolling';
 import { renderIcon, renderLine } from '../utils/g-renders';
+import { batchSetStyle } from '../utils/g-utils';
 import {
   getHiddenColumnContinuousSiblingNodes,
   isEqualDisplaySiblingNodeId,
@@ -46,6 +47,10 @@ import { normalizeTextAlign } from '../utils/normalize';
 import { HeaderCell } from './header-cell';
 
 export class ColCell extends HeaderCell<ColHeaderConfig> {
+  private verticalResizeArea: CustomRect;
+
+  private horizontalResizeArea: CustomRect;
+
   public get cellType() {
     return CellType.COL_CELL;
   }
@@ -311,20 +316,28 @@ export class ColCell extends HeaderCell<ColHeaderConfig> {
       cell: this,
     });
 
-    resizeArea.appendChild(
-      new CustomRect(
-        {
-          name: resizeAreaName,
-          style: {
-            ...attrs.style,
-            x: 0,
-            y: offsetY + height - resizeStyle.size!,
-            width: resizeAreaWidth,
+    const style = {
+      ...attrs.style,
+      x: 0,
+      y: offsetY + height - resizeStyle.size!,
+      width: resizeAreaWidth,
+    };
+
+    if (this.horizontalResizeArea) {
+      this.horizontalResizeArea.name = resizeAreaName;
+      this.horizontalResizeArea.appendInfo = attrs.appendInfo;
+      batchSetStyle(this.horizontalResizeArea, style);
+    } else {
+      this.horizontalResizeArea = resizeArea.appendChild(
+        new CustomRect(
+          {
+            name: resizeAreaName,
+            style,
           },
-        },
-        attrs.appendInfo,
-      ),
-    );
+          attrs.appendInfo,
+        ),
+      );
+    }
   }
 
   private getResizeAreaWidth() {
@@ -465,19 +478,26 @@ export class ColCell extends HeaderCell<ColHeaderConfig> {
       cell: this,
     });
 
-    resizeArea.appendChild(
-      new CustomRect(
-        {
-          style: {
-            ...attrs.style,
-            x: offsetX + width - resizeStyle.size!,
-            y: offsetY,
-            height,
+    const style = {
+      ...attrs.style,
+      x: offsetX + width - resizeStyle.size!,
+      y: offsetY,
+      height,
+    };
+
+    if (this.verticalResizeArea) {
+      this.verticalResizeArea.appendInfo = attrs.appendInfo;
+      batchSetStyle(this.verticalResizeArea, style);
+    } else {
+      this.verticalResizeArea = resizeArea.appendChild(
+        new CustomRect(
+          {
+            style,
           },
-        },
-        attrs.appendInfo,
-      ),
-    );
+          attrs.appendInfo,
+        ),
+      );
+    }
   }
 
   // 绘制热区
@@ -642,4 +662,9 @@ export class ColCell extends HeaderCell<ColHeaderConfig> {
       this.spreadsheet.isValueInCols()
     );
   }
+
+  public setHeaderConfig(headerConfig: ColHeaderConfig) {
+    super.setHeaderConfig(headerConfig);
+    // this.drawResizeArea();
+  }
 }