perf: optimize performance (#6670)

* refactor: optimize mergeOptions util

* perf: revert skip clone attributes when animation disabled

* refactor: remove effect

* test: update test case, disable theme

packages/g6/__tests__/demos/perf-20000-elements.ts

@@ -11,12 +11,10 @@ export const perf20000Elements: TestCase = async (context) => {
     node: {
       style: {
         size: 8,
-      },
-      palette: {
-        type: 'group',
-        field: 'cluster',
+        fill: 'gray',
       },
     },
+    theme: false,
     behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
     autoFit: 'view',
     plugins: [{ type: 'background', background: '#fff' }],

packages/g6/src/elements/combos/base-combo.ts

@@ -19,7 +19,6 @@ import { subStyleProps } from '../../utils/prefix';
 import { parseSize } from '../../utils/size';
 import { mergeOptions } from '../../utils/style';
 import { add, divide } from '../../utils/vector';
-import { effect } from '../effect';
 import type { BaseNodeStyleProps } from '../nodes';
 import { BaseNode } from '../nodes';
 import { Icon, IconStyleProps } from '../shapes';
@@ -155,7 +154,6 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
 
   protected drawCollapsedMarkerShape(attributes: Required<S>, container: Group): void {
     const style = this.getCollapsedMarkerStyle(attributes);
-    if (!effect(this, 'collapsedMarker', style)) return;
     this.upsert('collapsed-marker', Icon, style, container);
     connectImage(this);
   }

packages/g6/src/elements/edges/base-edge.ts

@@ -24,7 +24,6 @@ import { mergeOptions } from '../../utils/style';
 import * as Symbol from '../../utils/symbol';
 import { getWordWrapWidthByEnds } from '../../utils/text';
 import { BaseElement } from '../base-element';
-import { effect } from '../effect';
 import type { BadgeStyleProps, BaseShapeStyleProps, LabelStyleProps } from '../shapes';
 import { Badge, Label } from '../shapes';
 
@@ -338,7 +337,6 @@ export abstract class BaseEdge extends BaseElement<BaseEdgeStyleProps> implement
 
     if (enable) {
       const arrowStyle = this.getArrowStyle(attributes, isStart);
-      if (!effect(this, `arrow-${type}`, arrowStyle)) return;
 
       const [marker, markerOffset, arrowOffset] = isStart
         ? (['markerStart', 'markerStartOffset', 'startArrowOffset'] as const)
@@ -383,19 +381,16 @@ export abstract class BaseEdge extends BaseElement<BaseEdgeStyleProps> implement
 
   protected drawLabelShape(attributes: ParsedBaseEdgeStyleProps, container: Group) {
     const style = this.getLabelStyle(attributes);
-    if (!effect(this, 'label', style)) return;
     this.upsert('label', Label, style, container);
   }
 
   protected drawHaloShape(attributes: ParsedBaseEdgeStyleProps, container: Group) {
     const style = this.getHaloStyle(attributes);
-    if (!effect(this, 'halo', style)) return;
     this.upsert('halo', Path, style, container);
   }
 
   protected drawBadgeShape(attributes: ParsedBaseEdgeStyleProps, container: Group) {
     const style = this.getBadgeStyle(attributes);
-    if (!effect(this, 'badge', style)) return;
     this.upsert('badge', Badge, style, container);
   }
 
@@ -409,7 +404,6 @@ export abstract class BaseEdge extends BaseElement<BaseEdgeStyleProps> implement
 
   protected drawKeyShape(attributes: ParsedBaseEdgeStyleProps, container: Group): Path | undefined {
     const style = this.getKeyStyle(attributes);
-    if (!effect(this, 'key', style)) return;
     return this.upsert('key', Path, style, container);
   }
 

packages/g6/src/elements/effect.ts

@@ -10,8 +10,10 @@ const EFFECT_WEAKMAP = new WeakMap<Element, Record<string, any>>();
  * @param key - <zh/> 缓存 key | <en/> Cache key
  * @param style - <zh/> 样式属性 | <en/> Style attribute
  * @returns <zh/> 是否执行函数 | <en/> Whether to execute the function
+ * @deprecated <zh/> 该方法已废弃，并不能显著提升性能 | <en/> This method is deprecated and does not significantly improve performance
  */
 export function effect<T extends false | Record<string, any>>(target: Element, key: string, style: T): boolean {
+  // return true;
   if (!EFFECT_WEAKMAP.has(target)) EFFECT_WEAKMAP.set(target, {});
   const cache = EFFECT_WEAKMAP.get(target)!;
   if (!cache[key]) {

packages/g6/src/elements/nodes/base-node.ts

@@ -26,7 +26,6 @@ import { mergeOptions } from '../../utils/style';
 import { getWordWrapWidthByBox } from '../../utils/text';
 import { setVisibility } from '../../utils/visibility';
 import { BaseElement } from '../base-element';
-import { effect } from '../effect';
 import type { BadgeStyleProps, BaseShapeStyleProps, IconStyleProps, LabelStyleProps } from '../shapes';
 import { Badge, Icon, Label } from '../shapes';
 import { connectImage, dispatchPositionChange } from '../shapes/image';
@@ -365,16 +364,12 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
 
   protected drawHaloShape(attributes: Required<S>, container: Group): void {
     const style = this.getHaloStyle(attributes);
-    if (!effect(this, 'halo', style)) return;
-
     const keyShape = this.getShape('key');
     this.upsert('halo', keyShape.constructor as new (...args: unknown[]) => DisplayObject, style, container);
   }
 
   protected drawIconShape(attributes: Required<S>, container: Group): void {
     const style = this.getIconStyle(attributes);
-    if (!effect(this, 'icon', style)) return;
-
     this.upsert('icon', Icon, style, container);
     connectImage(this);
   }
@@ -383,8 +378,6 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
     const badgesStyle = this.getBadgesStyle(attributes);
     Object.keys(badgesStyle).forEach((key) => {
       const style = badgesStyle[key];
-      if (!effect(this, `badge-${key}`, style)) return;
-
       this.upsert(`badge-${key}`, Badge, style, container);
     });
   }
@@ -395,16 +388,12 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
     Object.keys(portsStyle).forEach((key) => {
       const style = portsStyle[key] as CircleStyleProps;
       const shapeKey = `port-${key}`;
-      if (!effect(this, shapeKey, style)) return;
-
       this.upsert(shapeKey, GCircle, style, container);
     });
   }
 
   protected drawLabelShape(attributes: Required<S>, container: Group): void {
     const style = this.getLabelStyle(attributes);
-    if (!effect(this, 'label', style)) return;
-
     this.upsert('label', Label, style, container);
   }
 

packages/g6/src/runtime/element.ts

@@ -439,18 +439,14 @@ export class ElementController {
     this.shapeTypeMap[id] = type;
     this.elementMap[id] = element;
 
-    const { stage = 'enter', animation } = context;
-
-    const enableAnimation = animation && this.context.options.animation;
+    const { stage = 'enter' } = context;
 
     this.context.animation?.add(
       {
         element,
         elementType,
         stage,
-        // <zh/> 当关闭动画时，不需要深拷贝样式
-        // <en/> When the animation is turned off, there is no need to deep copy the style
-        originalStyle: enableAnimation ? { ...element.attributes } : element.attributes,
+        originalStyle: { ...element.attributes },
         updatedStyle: style,
       },
       {

packages/g6/src/utils/style.ts

@@ -35,15 +35,22 @@ export function computeElementCallbackStyle(
  * <zh/> 合并图形配置项
  *
  * <en/> Merge shape configuration
- * @param opt1 - <zh/> 配置项1 | <en/> configuration 1
- * @param opt2 - <zh/> 配置项2 | <en/> configuration 2
+ * @param defaultOptions - <zh/> 配置项1 | <en/> configuration 1
+ * @param modifiedOptions - <zh/> 配置项2 | <en/> configuration 2
  * @returns <zh/> 合并后的配置项 | <en/> merged configuration
  */
-export function mergeOptions(opt1: DisplayObjectConfig<any>, opt2: DisplayObjectConfig<any>): DisplayObjectConfig<any> {
-  const s1 = opt1?.style || {};
-  const s2 = opt2?.style || {};
-  return Object.assign({}, opt1, opt2, {
-    style: opt1?.style ? Object.assign({}, s1, s2) : s2,
+export function mergeOptions(
+  defaultOptions: DisplayObjectConfig<any>,
+  modifiedOptions: DisplayObjectConfig<any>,
+): DisplayObjectConfig<any> {
+  const s1 = defaultOptions?.style || {};
+  const s2 = modifiedOptions?.style || {};
+  for (const key in s1) {
+    if (!(key in s2)) s2[key] = s1[key];
+  }
+
+  return Object.assign({}, defaultOptions, modifiedOptions, {
+    style: s2,
   });
 }