Skip to content

Commit b49ce81

Browse files
Aarebeccaantv
Aarebecca
and
antv
authored
perf: performance optimize (#6267)
* feat(utils): add isElementDataEqual to optimize compare time cost * docs: disable animation of 3d massive * perf: optimize graph setOptions perf * perf: skip unnecessary transforms * refactor: adjust tree structure logic * docs: optimize site demo to use canvas renderer * perf: add massive element perf test case * perf: add perf test report * test: add test case to improve coverage * fix: fix the issue that devicePixelRatio not effect * perf: skip unnecessary style copy of unnecessary and computing style --------- Co-authored-by: antv <[email protected]>
1 parent 9c04450 commit b49ce81

File tree

15 files changed

+661
-60
lines changed

15 files changed

+661
-60
lines changed

‎packages/g6/__tests__/perf-report/9821ed36_2024-09-03_11:28:42.json‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
{
2+
"version": "1.0",
3+
"device": {
4+
"os": {
5+
"arch": "arm64",
6+
"distro": "macOS",
7+
"serial": "9821ed36011eee5abf6c71d6fc2c03fb4bf4655e674c56b7f50e2560cb6e924a"
8+
},
9+
"cpu": {
10+
"manufacturer": "Apple",
11+
"brand": "M1 Pro",
12+
"speed": 2.4,
13+
"cores": 10
14+
},
15+
"memory": {
16+
"total": 16384,
17+
"free": 48.078125
18+
},
19+
"gpu": {
20+
"vendor": "Apple",
21+
"model": "Apple M1 Pro",
22+
"cores": "16"
23+
}
24+
},
25+
"repo": "41a9f98828cf1025a113360f5d3acbd7a918dd63",
26+
"client": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/128.0.6613.18 Safari/537.36",
27+
"reports": {
28+
"UpdateElementState": {
29+
"time": [
30+
{
31+
"min": 116.09999996423721,
32+
"max": 148.30000001192093,
33+
"median": 119.70000004768372,
34+
"avg": 120.67500002682209,
35+
"variance": 13.551875019520523,
36+
"reliable": true,
37+
"key": "update element state to selected"
38+
},
39+
{
40+
"min": 74.30000001192093,
41+
"max": 82.10000002384186,
42+
"median": 75.90000003576279,
43+
"avg": 75.63750000298023,
44+
"variance": 0.9998437715321785,
45+
"reliable": true,
46+
"key": "update element state to default"
47+
},
48+
{
49+
"min": 61.89999997615814,
50+
"max": 73.79999995231628,
51+
"median": 63.80000001192093,
52+
"avg": 63.712500013411045,
53+
"variance": 0.5585937445983297,
54+
"reliable": true,
55+
"key": "update element position"
56+
}
57+
],
58+
"status": "passed"
59+
},
60+
"dataDiff1000": {
61+
"time": [
62+
{
63+
"min": 2.099999964237213,
64+
"max": 8.600000023841858,
65+
"median": 4.699999988079071,
66+
"avg": 3.9375000074505806,
67+
"variance": 0.999843751229346,
68+
"reliable": false,
69+
"key": "data diff"
70+
}
71+
],
72+
"status": "passed"
73+
},
74+
"dataDiff10000": {
75+
"time": [
76+
{
77+
"min": 3.100000023841858,
78+
"max": 12.399999976158142,
79+
"median": 8,
80+
"avg": 7.325000002980232,
81+
"variance": 3.504375010281801,
82+
"reliable": false,
83+
"key": "data diff"
84+
}
85+
],
86+
"status": "passed"
87+
},
88+
"dataDiff100000": {
89+
"time": [
90+
{
91+
"min": 11.099999964237213,
92+
"max": 39.30000001192093,
93+
"median": 13.600000023841858,
94+
"avg": 17.825000002980232,
95+
"variance": 63.99937488421798,
96+
"reliable": true,
97+
"key": "data diff"
98+
}
99+
],
100+
"status": "passed"
101+
},
102+
"dataDiff5000": {
103+
"time": [
104+
{
105+
"min": 2,
106+
"max": 15.599999964237213,
107+
"median": 4.199999988079071,
108+
"avg": 5.637500002980232,
109+
"variance": 9.34484379000962,
110+
"reliable": false,
111+
"key": "data diff"
112+
}
113+
],
114+
"status": "passed"
115+
},
116+
"dataDiff50000": {
117+
"time": [
118+
{
119+
"min": 5.5,
120+
"max": 18.5,
121+
"median": 7.5,
122+
"avg": 8.487500004470348,
123+
"variance": 9.353593760840596,
124+
"reliable": true,
125+
"key": "data diff"
126+
}
127+
],
128+
"status": "passed"
129+
},
130+
"elementDrawing100": {
131+
"time": [
132+
{
133+
"min": 12.900000035762787,
134+
"max": 21.80000001192093,
135+
"median": 16.19999998807907,
136+
"avg": 16.1875,
137+
"variance": 2.983593802154065,
138+
"reliable": true,
139+
"key": "element drawing"
140+
},
141+
{
142+
"min": 5.900000035762787,
143+
"max": 8.699999988079071,
144+
"median": 7.899999976158142,
145+
"avg": 7.824999995529652,
146+
"variance": 0.49687498323619417,
147+
"reliable": true,
148+
"key": "grid layout"
149+
}
150+
],
151+
"status": "passed"
152+
},
153+
"elementDrawing1000": {
154+
"time": [
155+
{
156+
"min": 53.60000002384186,
157+
"max": 71.30000001192093,
158+
"median": 66.89999997615814,
159+
"avg": 66.61249999701977,
160+
"variance": 7.411093775406481,
161+
"reliable": true,
162+
"key": "element drawing"
163+
},
164+
{
165+
"min": 33.10000002384186,
166+
"max": 48.799999952316284,
167+
"median": 36.90000003576279,
168+
"avg": 35.974999994039536,
169+
"variance": 2.8368749639391897,
170+
"reliable": true,
171+
"key": "grid layout"
172+
}
173+
],
174+
"status": "passed"
175+
},
176+
"elementDrawing10000": {
177+
"time": [
178+
{
179+
"min": 414.19999998807907,
180+
"max": 536.3000000119209,
181+
"median": 424.5,
182+
"avg": 431.0874999910593,
183+
"variance": 312.4835943404585,
184+
"reliable": true,
185+
"key": "element drawing"
186+
},
187+
{
188+
"min": 306.19999998807907,
189+
"max": 339.19999998807907,
190+
"median": 321.5,
191+
"avg": 319.17499999701977,
192+
"variance": 83.65437486723066,
193+
"reliable": true,
194+
"key": "grid layout"
195+
}
196+
],
197+
"status": "passed"
198+
},
199+
"elementDrawing500": {
200+
"time": [
201+
{
202+
"min": 35.80000001192093,
203+
"max": 56.5,
204+
"median": 42.69999998807907,
205+
"avg": 43.962499998509884,
206+
"variance": 21.732343734689056,
207+
"reliable": true,
208+
"key": "element drawing"
209+
},
210+
{
211+
"min": 17.100000023841858,
212+
"max": 23.80000001192093,
213+
"median": 20.899999976158142,
214+
"avg": 20.850000008940697,
215+
"variance": 0.7200000214576724,
216+
"reliable": true,
217+
"key": "grid layout"
218+
}
219+
],
220+
"status": "passed"
221+
},
222+
"elementDrawing5000": {
223+
"time": [
224+
{
225+
"min": 204.19999998807907,
226+
"max": 252.79999995231628,
227+
"median": 225.5,
228+
"avg": 225.11250000447035,
229+
"variance": 51.89859370965511,
230+
"reliable": true,
231+
"key": "element drawing"
232+
},
233+
{
234+
"min": 153.79999995231628,
235+
"max": 171.89999997615814,
236+
"median": 161.30000001192093,
237+
"avg": 159.70000000298023,
238+
"variance": 21.232500118315222,
239+
"reliable": true,
240+
"key": "grid layout"
241+
}
242+
],
243+
"status": "passed"
244+
},
245+
"massiveElement60000": {
246+
"time": [
247+
{
248+
"min": 3130.5,
249+
"max": 3468.2999999523163,
250+
"median": 3167.199999988079,
251+
"avg": 3167.199999988079,
252+
"variance": 0,
253+
"reliable": true,
254+
"key": "massive element drawing"
255+
}
256+
],
257+
"status": "passed"
258+
}
259+
}
260+
}

‎packages/g6/__tests__/perf/massive-element.perf.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Graph } from '@antv/g6';
2+
import type { Test } from 'iperf';
3+
4+
export const massiveElement60000: Test = async ({ container, perf }) => {
5+
const data = await fetch('https://assets.antv.antgroup.com/g6/60000.json').then((res) => res.json());
6+
7+
const graph = new Graph({
8+
container,
9+
animation: false,
10+
autoFit: 'view',
11+
data,
12+
node: {
13+
style: {
14+
size: 4,
15+
batchKey: 'node',
16+
},
17+
},
18+
behaviors: ['zoom-canvas', 'drag-canvas'],
19+
});
20+
21+
await perf.evaluate('massive element drawing', async () => {
22+
await graph.draw();
23+
});
24+
};
25+
26+
massiveElement60000.iteration = 3;

0 commit comments

Comments
 (0)