perf: optimize element event distribution and attribute update process

Author: wang1212

__tests__/demos/perf/attr-update.ts

@@ -1,6 +1,14 @@
 import * as lil from 'lil-gui';
-import { Rect, Group, CanvasEvent } from '@antv/g';
-import type { Canvas } from '@antv/g';
+import {
+  type Canvas,
+  Rect,
+  Group,
+  CanvasEvent,
+  ElementEvent,
+  runtime,
+} from '@antv/g';
+
+runtime.enablePerformanceOptimization = false;
 
 export async function attrUpdate(context: { canvas: Canvas; gui: lil.GUI }) {
   const { canvas, gui } = context;
@@ -9,9 +17,9 @@ export async function attrUpdate(context: { canvas: Canvas; gui: lil.GUI }) {
   await canvas.ready;
 
   const { width, height } = canvas.getConfig();
-  const count = 2e4;
   const root = new Group();
-  const rects = [];
+  let count = 1e4;
+  let rects = [];
 
   const perfStore: { [k: string]: { count: number; time: number } } = {
     update: { count: 0, time: 0 },
@@ -28,6 +36,7 @@ export async function attrUpdate(context: { canvas: Canvas; gui: lil.GUI }) {
   }
 
   function update() {
+    // console.log('update');
     // const startTime = performance.now();
     // console.time('update');
 
@@ -53,6 +62,9 @@ export async function attrUpdate(context: { canvas: Canvas; gui: lil.GUI }) {
   }
 
   function render() {
+    root.destroyChildren();
+    rects = [];
+
     for (let i = 0; i < count; i++) {
       const x = Math.random() * width;
       const y = Math.random() * height;
@@ -66,17 +78,28 @@ export async function attrUpdate(context: { canvas: Canvas; gui: lil.GUI }) {
           width: size,
           height: size,
           fill: 'white',
-          stroke: 'black',
+          stroke: '#000',
+          lineWidth: 1,
         },
       });
       root.appendChild(rect);
       rects[i] = { x, y, size, speed, el: rect };
+
+      // rect.isMutationObserved = true;
+      rect.addEventListener(ElementEvent.ATTR_MODIFIED, () => {
+        console.log(ElementEvent.ATTR_MODIFIED);
+      });
     }
   }
 
   render();
   canvas.addEventListener(CanvasEvent.BEFORE_RENDER, () => update());
 
+  // root.isMutationObserved = true;
+  // canvas.addEventListener(ElementEvent.BOUNDS_CHANGED, () => {
+  //   console.log('first');
+  // });
+
   canvas.appendChild(root);
 
   canvas.addEventListener(
@@ -88,18 +111,23 @@ export async function attrUpdate(context: { canvas: Canvas; gui: lil.GUI }) {
   );
 
   // GUI
+  // canvas.getConfig().renderer.getConfig().enableCulling = true;
   canvas.getConfig().renderer.getConfig().enableRenderingOptimization = true;
+  const observeConfig = {
+    objectCount: count,
+    enableRenderingOptimization: canvas.getConfig().renderer.getConfig()
+      .enableRenderingOptimization,
+    enablePerformanceOptimization: runtime.enablePerformanceOptimization,
+  };
 
-  gui
-    .add(
-      {
-        enableRenderingOptimization: canvas.getConfig().renderer.getConfig()
-          .enableRenderingOptimization,
-      },
-      'enableRenderingOptimization',
-    )
-    .onChange((result) => {
-      canvas.getConfig().renderer.getConfig().enableRenderingOptimization =
-        result;
-    });
+  gui.add(observeConfig, 'objectCount').onChange((value) => {
+    count = value;
+    render();
+  });
+  gui.add(observeConfig, 'enablePerformanceOptimization').onChange((value) => {
+    runtime.enablePerformanceOptimization = value;
+  });
+  gui.add(observeConfig, 'enableRenderingOptimization').onChange((value) => {
+    canvas.getConfig().renderer.getConfig().enableRenderingOptimization = value;
+  });
 }

__tests__/demos/perf/circles.ts

@@ -2,13 +2,14 @@ import { Circle } from '@antv/g';
 
 export async function circles(context) {
   const { canvas, container } = context;
+
   await canvas.ready;
 
-  canvas.addEventListener('rerender', () => {
-    console.log('rerender');
-  });
+  canvas.getConfig().renderer.getConfig().enableRenderingOptimization = true;
+
+  console.time('render');
 
-  for (let i = 0; i < 10000; i++) {
+  for (let i = 0; i < 5e4; i++) {
     const circle = new Circle({
       style: {
         cx: Math.random() * 640,
@@ -22,6 +23,14 @@ export async function circles(context) {
     canvas.appendChild(circle);
   }
 
+  canvas.addEventListener(
+    'rerender',
+    () => {
+      console.timeEnd('render');
+    },
+    { once: true },
+  );
+
   // canvas.appendChild(
   //   new Circle({
   //     style: {

__tests__/demos/perf/destroy-event.ts

@@ -0,0 +1,75 @@
+import {
+  Canvas,
+  ElementEvent,
+  Rect,
+  Group,
+  EventTarget,
+  runtime,
+} from '@antv/g';
+import * as tinybench from 'tinybench';
+
+/**
+ * 元素高频销毁与实例化性能测试
+ */
+export async function destroyEvent(context: { canvas: Canvas }) {
+  const { canvas } = context;
+  console.log(canvas);
+
+  await canvas.ready;
+
+  const { width, height } = canvas.getConfig();
+  const root = new Group();
+  let count = 2e2;
+  let rects = [];
+
+  function render() {
+    root.destroyChildren();
+    rects = [];
+
+    for (let i = 0; i < count; i++) {
+      const x = Math.random() * width;
+      const y = Math.random() * height;
+      const size = 10 + Math.random() * 40;
+      const speed = 1 + Math.random();
+
+      const rect = new Rect({
+        style: {
+          x,
+          y,
+          width: size,
+          height: size,
+          fill: 'white',
+          stroke: '#000',
+          lineWidth: 1,
+        },
+      });
+      root.appendChild(rect);
+      rects[i] = { x, y, size, speed, el: rect };
+    }
+  }
+
+  render();
+  canvas.appendChild(root);
+
+  // benchmark
+  // ----------
+  const bench = new tinybench.Bench({ name: 'event benchmark', time: 1e2 });
+
+  bench.add('0', async () => {
+    runtime.enablePerformanceOptimization = false;
+    render();
+  });
+  bench.add('1', async () => {
+    runtime.enablePerformanceOptimization = true;
+    render();
+  });
+
+  await bench.run();
+
+  console.log(bench.name);
+  console.table(bench.table());
+  console.log(bench.results);
+  console.log(bench.tasks);
+
+  // ----------
+}

__tests__/demos/perf/index.ts

@@ -3,3 +3,7 @@ export { rects } from './rect';
 export { image } from './image';
 export { attrUpdate } from './attr-update';
 export { massiveAttrs } from './massive-attrs';
+export { canvasApi } from './canvas-api';
+export { javascript } from './javascript';
+export { event } from './event';
+export { destroyEvent } from './destroy-event';

__tests__/demos/perf/javascript.ts

@@ -11,7 +11,10 @@ export async function javascript(context: { canvas: Canvas; gui: lil.GUI }) {
 
   // benchmark
   // ----------
-  const bench = new tinybench.Bench({ name: 'canvas benchmark', time: 1e2 });
+  const bench = new tinybench.Bench({
+    name: 'javascript benchmark',
+    time: 1e2,
+  });
   const array = [
     'stroke',
     'shadowType',