feat: 增加benchmark

site/.dumi/pages/benchmark/5-gesture/index.tsx

@@ -0,0 +1,91 @@
+import { delay, gestureSimulator } from '@antv/f-test-utils';
+import React, { useEffect, useRef } from 'react';
+import Stats from 'stats.js';
+import data from '../data.json';
+import { Axis, Canvas, Chart, Line, Tooltip } from './f2_opt';
+// import { Axis, Canvas, Chart, Line, Tooltip } from '@antv/f2';
+
+// @ts-ignore
+const stats = new Stats();
+stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+// const $stats = stats.dom;
+// $stats.style.position = 'relative';
+// $stats.style.left = '0px';
+// $stats.style.top = '0px';
+
+document.body.insertBefore(stats.dom, document.body.firstChild);
+
+function renderChart(canvasEl: HTMLCanvasElement) {
+  // 清空画布
+  canvasEl.width = 0;
+  canvasEl.height = 0;
+
+  function getProps(data) {
+    const vNode = (
+      // @ts-ignore
+      <Canvas
+        context={canvasEl.getContext('2d')}
+        pixelRatio={window.devicePixelRatio}
+        animate={false}
+      >
+        <Chart data={data}>
+          <Axis field="rate" />
+          <Axis field="reportDate" type="timeCat" tickCount={5} />
+          <Line x="reportDate" y="rate" color="codeType" />
+          <Tooltip></Tooltip>
+        </Chart>
+      </Canvas>
+    );
+
+    return vNode.props;
+  }
+
+  const props = getProps(data.data);
+  // @ts-ignore
+  const canvas = new Canvas(props);
+  // @ts-ignore
+  const gcanvas = canvas.canvas;
+
+  canvas.render();
+
+  gcanvas.addEventListener('afterrender', () => {
+    stats.update();
+  });
+
+  let i = 0;
+  const loopTouchmove = () => {
+    i++;
+    gestureSimulator(canvasEl, 'touchmove', {
+      x: i,
+      y: 35,
+    });
+    if (i >= canvasEl.width - 400) i = 0;
+    window.requestAnimationFrame(loopTouchmove);
+  };
+
+  setTimeout(async () => {
+    gestureSimulator(canvasEl, 'touchstart', { x: 60, y: 170 });
+    await delay(450);
+    loopTouchmove();
+  });
+
+  return canvas;
+}
+
+export default () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvasEl = canvasRef.current;
+    if (!canvasEl) return;
+
+    renderChart(canvasEl);
+  }, []);
+
+  return (
+    <div style={{ paddingTop: '50px' }}>
+      <h2>F2 latest</h2>
+      <canvas ref={canvasRef} style={{ width: '100%', height: '260px' }} />
+    </div>
+  );
+};

site/.dumi/pages/benchmark/5-gesture/index_4.tsx

@@ -0,0 +1,94 @@
+import { delay, gestureSimulator } from '@antv/f-test-utils';
+import React, { useEffect, useRef } from 'react';
+import Stats from 'stats.js';
+import data from '../data.json';
+import { Axis, Canvas, Chart, Line, Tooltip } from './f2_4';
+// import { Axis, Canvas, Chart, Line, Tooltip } from '@antv/f2';
+
+// @ts-ignore
+const stats = new Stats();
+stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+// const $stats = stats.dom;
+// $stats.style.position = 'relative';
+// $stats.style.left = '0px';
+// $stats.style.top = '0px';
+
+document.body.insertBefore(stats.dom, document.body.firstChild);
+
+function renderChart(canvasEl: HTMLCanvasElement) {
+  // 清空画布
+  canvasEl.width = 0;
+  canvasEl.height = 0;
+
+  function getProps(data) {
+    const vNode = (
+      // @ts-ignore
+      <Canvas
+        context={canvasEl.getContext('2d')}
+        pixelRatio={window.devicePixelRatio}
+        animate={false}
+      >
+        <Chart data={data}>
+          <Axis field="rate" />
+          <Axis field="reportDate" type="timeCat" tickCount={5} />
+          <Line x="reportDate" y="rate" color="codeType" />
+          <Tooltip></Tooltip>
+        </Chart>
+      </Canvas>
+    );
+
+    return vNode.props;
+  }
+
+  const props = getProps(data.data);
+  // @ts-ignore
+  const canvas = new Canvas(props);
+  // @ts-ignore
+  const gcanvas = canvas.canvas;
+
+  canvas.render();
+
+  // gcanvas.addEventListener('afterrender', () => {
+  //   stats.update();
+  // });
+  gcanvas.on('afterdraw', () => {
+    stats.update();
+  });
+
+  let i = 0;
+  const loopTouchmove = () => {
+    i++;
+    gestureSimulator(canvasEl, 'touchmove', {
+      x: i,
+      y: 35,
+    });
+    if (i >= canvasEl.width - 400) i = 0;
+    window.requestAnimationFrame(loopTouchmove);
+  };
+
+  setTimeout(async () => {
+    gestureSimulator(canvasEl, 'touchstart', { x: 60, y: 170 });
+    await delay(450);
+    loopTouchmove();
+  });
+
+  return canvas;
+}
+
+export default () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvasEl = canvasRef.current;
+    if (!canvasEl) return;
+
+    renderChart(canvasEl);
+  }, []);
+
+  return (
+    <div style={{ paddingTop: '50px' }}>
+      <h2>F2 4.x</h2>
+      <canvas ref={canvasRef} style={{ width: '100%', height: '260px' }} />
+    </div>
+  );
+};

site/.dumi/pages/benchmark/5-gesture/index_old.tsx

@@ -0,0 +1,90 @@
+import { delay, gestureSimulator } from '@antv/f-test-utils';
+import React, { useEffect, useRef } from 'react';
+import Stats from 'stats.js';
+import data from '../data.json';
+import { Axis, Canvas, Chart, Line, Tooltip } from './f2_no_opt';
+// import { Axis, Canvas, Chart, Line, Tooltip } from '@antv/f2';
+
+// @ts-ignore
+const stats = new Stats();
+stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+// const $stats = stats.dom;
+// $stats.style.position = 'relative';
+// $stats.style.left = '0px';
+// $stats.style.top = '0px';
+
+document.body.insertBefore(stats.dom, document.body.firstChild);
+
+function renderChart(canvasEl: HTMLCanvasElement) {
+  // 清空画布
+  canvasEl.width = 0;
+  canvasEl.height = 0;
+
+  function getProps(data) {
+    const vNode = (
+      // @ts-ignore
+      <Canvas
+        context={canvasEl.getContext('2d')}
+        pixelRatio={window.devicePixelRatio}
+        animate={false}
+      >
+        <Chart data={data}>
+          <Axis field="rate" />
+          <Axis field="reportDate" type="timeCat" tickCount={5} />
+          <Line x="reportDate" y="rate" color="codeType" />
+          <Tooltip></Tooltip>
+        </Chart>
+      </Canvas>
+    );
+
+    return vNode.props;
+  }
+
+  const props = getProps(data.data);
+  // @ts-ignore
+  const canvas = new Canvas(props);
+  // @ts-ignore
+  const gcanvas = canvas.canvas;
+
+  canvas.render();
+
+  gcanvas.addEventListener('afterrender', () => {
+    stats.update();
+  });
+
+  let i = 0;
+  const loopTouchmove = () => {
+    i++;
+    gestureSimulator(canvasEl, 'touchmove', {
+      x: i,
+      y: 35,
+    });
+    if (i >= canvasEl.width - 400) i = 0;
+    window.requestAnimationFrame(loopTouchmove);
+  };
+
+  setTimeout(async () => {
+    gestureSimulator(canvasEl, 'touchstart', { x: 60, y: 170 });
+    await delay(450);
+    loopTouchmove();
+  });
+
+  return canvas;
+}
+export default () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvasEl = canvasRef.current;
+    if (!canvasEl) return;
+
+    renderChart(canvasEl);
+  }, []);
+
+  return (
+    <div style={{ paddingTop: '50px' }}>
+      <h2>每个元素绑定事件</h2>
+      <canvas ref={canvasRef} style={{ width: '100%', height: '260px' }} />
+    </div>
+  );
+};

site/.dumi/pages/benchmark/5-gesture/index_prev.tsx

@@ -0,0 +1,91 @@
+import { delay, gestureSimulator } from '@antv/f-test-utils';
+import React, { useEffect, useRef } from 'react';
+import Stats from 'stats.js';
+import data from '../data.json';
+import { Axis, Canvas, Chart, Line, Tooltip } from './f2_prev';
+// import { Axis, Canvas, Chart, Line, Tooltip } from '@antv/f2';
+
+// @ts-ignore
+const stats = new Stats();
+stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
+// const $stats = stats.dom;
+// $stats.style.position = 'relative';
+// $stats.style.left = '0px';
+// $stats.style.top = '0px';
+
+document.body.insertBefore(stats.dom, document.body.firstChild);
+
+function renderChart(canvasEl: HTMLCanvasElement) {
+  // 清空画布
+  canvasEl.width = 0;
+  canvasEl.height = 0;
+
+  function getProps(data) {
+    const vNode = (
+      // @ts-ignore
+      <Canvas
+        context={canvasEl.getContext('2d')}
+        pixelRatio={window.devicePixelRatio}
+        animate={false}
+      >
+        <Chart data={data}>
+          <Axis field="rate" />
+          <Axis field="reportDate" type="timeCat" tickCount={5} />
+          <Line x="reportDate" y="rate" color="codeType" />
+          <Tooltip></Tooltip>
+        </Chart>
+      </Canvas>
+    );
+
+    return vNode.props;
+  }
+
+  const props = getProps(data.data);
+  // @ts-ignore
+  const canvas = new Canvas(props);
+  // @ts-ignore
+  const gcanvas = canvas.canvas;
+
+  canvas.render();
+
+  gcanvas.addEventListener('afterrender', () => {
+    stats.update();
+  });
+
+  let i = 0;
+  const loopTouchmove = () => {
+    i++;
+    gestureSimulator(canvasEl, 'touchmove', {
+      x: i,
+      y: 35,
+    });
+    if (i >= canvasEl.width - 400) i = 0;
+    window.requestAnimationFrame(loopTouchmove);
+  };
+
+  setTimeout(async () => {
+    gestureSimulator(canvasEl, 'touchstart', { x: 60, y: 170 });
+    await delay(450);
+    loopTouchmove();
+  });
+
+  return canvas;
+}
+
+export default () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvasEl = canvasRef.current;
+    if (!canvasEl) return;
+
+    renderChart(canvasEl);
+  }, []);
+
+  return (
+    <div style={{ paddingTop: '50px' }}>
+      <h2>有问题的gesture</h2>
+      <canvas ref={canvasRef} style={{ width: '100%', height: '260px' }} />
+    </div>
+  );
+};