Skip to content

Commit

Permalink
perf: optimize performance (#1789)
Browse files Browse the repository at this point in the history
* test: add base perf test case

* refactor: remove CSSParsing support

* refactor: remove enableDataset support

* refactor: remove enableAttributeDashCased support

* refactor: remove useless methods of StyleValueRegistry

* feat: transform support array type

* refactor: simplify CSSProperty

* test: add test tsconfig and update test case

* fix: remove dom event listenser

* refactor: simpify utils

* refactor: optimize display-object, style-value-registry

* refactor: canvas support cleanUpOnDestroy config, fix memory leak after destroy

* refactor: event target remove 3.0 compatible

* feat: add fragment to support batch operations

* refactor: node foreach remove assign params

* refactor: scene graph service use shared variables

* fix: fix crash after node destroyed

* fix: fix parsedTransformToMat4 optimizer

* refactor: cancel animation frame after canvas destroy
  • Loading branch information
Aarebecca authored Oct 22, 2024
1 parent 0d7647e commit df950a9
Show file tree
Hide file tree
Showing 96 changed files with 1,643 additions and 4,083 deletions.
1 change: 1 addition & 0 deletions __tests__/demos/perf/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { circles } from './circles';
export { rects } from './rect';
48 changes: 48 additions & 0 deletions __tests__/demos/perf/rect.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { Rect, Group, Fragment } from '@antv/g';
import type { Canvas } from '@antv/g';

export async function rects(context: { canvas: Canvas }) {
const { canvas } = context;

await canvas.ready;

const group1 = canvas.appendChild(new Group({ id: 'group1' }));
const group2 = group1.appendChild(new Group({ id: 'group2' }));

console.time('render');

const fragment = new Fragment();

for (let i = 0; i < 10_0000; i++) {
const group = fragment.appendChild(
new Group({
id: `group-${i}`,
style: {
transform: [['translate', Math.random() * 640, Math.random() * 640]],
},
}),
);

group.appendChild(
new Rect({
style: {
width: 10,
height: 10,
fill: '#1890FF',
stroke: '#F04864',
lineWidth: 4,
},
}),
);
}

group2.appendChild(fragment);

canvas.addEventListener(
'rerender',
() => {
console.timeEnd('render');
},
{ once: true },
);
}
2 changes: 0 additions & 2 deletions __tests__/demos/plugin/yoga-text.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import { runtime, Circle, Group, Rect, Text } from '@antv/g';
import { Plugin as PluginYoga } from '@antv/g-plugin-yoga';

export async function yogaText(context) {
runtime.enableCSSParsing = true;

const { canvas, gui } = context;
await canvas.ready;

Expand Down
41 changes: 32 additions & 9 deletions __tests__/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,11 @@ selectChart.style.margin = '1em';
renderOptions();
selectChart.onchange = () => {
const { value } = selectChart;
history.pushState({ value }, '', `?name=${value}&renderer=${selectRenderer.value}`);
history.pushState(
{ value },
'',
`?name=${value}&renderer=${selectRenderer.value}`,
);
plot();
};
document.onkeydown = (event) => {
Expand Down Expand Up @@ -96,7 +100,11 @@ selectRenderer.style.margin = '1em';
selectRenderer.append(...Object.keys(renderers).map(createOption));
selectRenderer.onchange = () => {
const { value } = selectRenderer;
history.pushState({ value }, '', `?name=${selectChart.value}&renderer=${value}`);
history.pushState(
{ value },
'',
`?name=${selectChart.value}&renderer=${value}`,
);
plot();
};

Expand All @@ -109,6 +117,13 @@ searchInput.onkeyup = () => {
renderOptions(value);
};

// Render button
const renderBtn = document.createElement('button');
renderBtn.textContent = 'Render';
renderBtn.onclick = () => {
if (selectChart.value) plot();
};

// Span for tips.
const span = document.createElement('span');
span.textContent = 'Press left or right to view more.';
Expand All @@ -123,19 +138,22 @@ addEventListener('popstate', (event) => {
// @ts-ignore
const initialValue = new URL(location).searchParams.get('name') as string;
// @ts-ignore
const initialRenderer = new URL(location).searchParams.get('renderer') as string;
const initialRenderer = new URL(location).searchParams.get(
'renderer',
) as string;
if (tests[initialValue]) selectChart.value = initialValue;
if (renderers[initialRenderer]) selectRenderer.value = initialRenderer;
app.append(selectChart);
app.append(searchInput);
app.append(selectRenderer);
app.append(span);
app.append(renderBtn);
plot();

async function plot() {
if (currentContainer) {
currentContainer.remove();
if (canvas) canvas.destroy();
if (canvas) canvas.destroy(false, true);
if (prevAfter) prevAfter();
}
currentContainer = document.createElement('div');
Expand All @@ -155,7 +173,9 @@ function createOption(key) {
}

function namespace(object, name) {
return Object.fromEntries(Object.entries(object).map(([key, value]) => [`${name}-${key}`, value]));
return Object.fromEntries(
Object.entries(object).map(([key, value]) => [`${name}-${key}`, value]),
);
}

function createSpecRender(object) {
Expand All @@ -164,8 +184,6 @@ function createSpecRender(object) {
// Select render is necessary for spec tests.
selectRenderer.style.display = 'inline';

runtime.enableCSSParsing = false;

const renderer = new renderers[selectRenderer.value]({
// Used for WebGL renderer
wasmDir: '/',
Expand All @@ -190,13 +208,16 @@ function createSpecRender(object) {
generate.initRenderer(renderer, selectRenderer.value);
}

renderer.registerPlugin(new DragAndDropPlugin({ dragstartDistanceThreshold: 1 }));
renderer.registerPlugin(
new DragAndDropPlugin({ dragstartDistanceThreshold: 1 }),
);

const $div = document.createElement('div');
canvas = new Canvas({
container: $div,
width: window['CANVAS_WIDTH'] || 640,
height: window['CANVAS_HEIGHT'] || 640,
cleanUpOnDestroy: false,
renderer,
});

Expand Down Expand Up @@ -237,5 +258,7 @@ function createSpecRender(object) {
container.append($div);
};
};
return Object.fromEntries(Object.entries(object).map(([key, value]) => [key, specRender(value)]));
return Object.fromEntries(
Object.entries(object).map(([key, value]) => [key, specRender(value)]),
);
}
8 changes: 8 additions & 0 deletions __tests__/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"compilerOptions": {
"types": ["jest"],
"moduleResolution": "node",
"lib": ["ESNext", "DOM"]
},
"extends": "../tsconfig.json"
}
Loading

0 comments on commit df950a9

Please sign in to comment.