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

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/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,
+        ),
+      );
+    }
   }
 
   // 绘制热区
@@ -635,4 +655,9 @@ export class ColCell extends HeaderCell<ColHeaderConfig> {
       })
     );
   }
+
+  public setHeaderConfig(headerConfig: ColHeaderConfig) {
+    super.setHeaderConfig(headerConfig);
+    // this.drawResizeArea();
+  }
 }