| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | See https://www.julienpradet.fr/tutoriels/view-transition-with-ratio-change/ for full article | |||||||||||||||||||||||||
2 | ||||||||||||||||||||||||||
3 | number of unique view-transition-name | time between click and animation start (ms) | On a Dell XPS 13 7390 | |||||||||||||||||||||||
4 | 10 | 70 | With CPU Performance throttle x4 in Chrome Dev Tools | |||||||||||||||||||||||
5 | 25 | 100 | Tested webpage: https://www.julienpradet.fr/tutoriels/view-transition-with-ratio-change/performance-test/ | |||||||||||||||||||||||
6 | 50 | 140 | - Code is written in Svelte, but even at 1000 elements in the list, only 150ms is because of Svelte | |||||||||||||||||||||||
7 | 75 | 169 | - Whether the CSS associated with view-transition pseudo elements is complex or not does not impact the results | |||||||||||||||||||||||
8 | 100 | 229 | ||||||||||||||||||||||||
9 | 125 | 310 | ||||||||||||||||||||||||
10 | 150 | 377 | ||||||||||||||||||||||||
11 | 175 | 460 | ||||||||||||||||||||||||
12 | 200 | 520 | <- Also starts to lag during animation (< 60fps) | |||||||||||||||||||||||
13 | 250 | 610 | ||||||||||||||||||||||||
14 | 300 | 870 | ||||||||||||||||||||||||
15 | 350 | 1140 | ||||||||||||||||||||||||
16 | 400 | 1360 | ||||||||||||||||||||||||
17 | 500 | 1900 | ||||||||||||||||||||||||
18 | 600 | 2860 | ||||||||||||||||||||||||
19 | 700 | 3840 | ||||||||||||||||||||||||
20 | 800 | 5020 | ||||||||||||||||||||||||
21 | 900 | 6440 | ||||||||||||||||||||||||
22 | 1000 | 7920 | ||||||||||||||||||||||||
23 | ||||||||||||||||||||||||||
24 | ||||||||||||||||||||||||||
25 | ||||||||||||||||||||||||||
26 | ||||||||||||||||||||||||||
27 | ||||||||||||||||||||||||||
28 | ||||||||||||||||||||||||||
29 | ||||||||||||||||||||||||||
30 | ||||||||||||||||||||||||||
31 | ||||||||||||||||||||||||||
32 | ||||||||||||||||||||||||||
33 | ||||||||||||||||||||||||||
34 | ||||||||||||||||||||||||||
35 | ||||||||||||||||||||||||||
36 | ||||||||||||||||||||||||||
37 | ||||||||||||||||||||||||||
38 | ||||||||||||||||||||||||||
39 | ||||||||||||||||||||||||||
40 | ||||||||||||||||||||||||||
41 | ||||||||||||||||||||||||||
42 | ||||||||||||||||||||||||||
43 | ||||||||||||||||||||||||||
44 | ||||||||||||||||||||||||||
45 | ||||||||||||||||||||||||||
46 | ||||||||||||||||||||||||||
47 | ||||||||||||||||||||||||||
48 | ||||||||||||||||||||||||||
49 | ||||||||||||||||||||||||||
50 | ||||||||||||||||||||||||||
51 | ||||||||||||||||||||||||||
52 | ||||||||||||||||||||||||||
53 | ||||||||||||||||||||||||||
54 | ||||||||||||||||||||||||||
55 | ||||||||||||||||||||||||||
56 | ||||||||||||||||||||||||||
57 | ||||||||||||||||||||||||||
58 | ||||||||||||||||||||||||||
59 | ||||||||||||||||||||||||||
60 | ||||||||||||||||||||||||||
61 | ||||||||||||||||||||||||||
62 | ||||||||||||||||||||||||||
63 | ||||||||||||||||||||||||||
64 | ||||||||||||||||||||||||||
65 | ||||||||||||||||||||||||||
66 | ||||||||||||||||||||||||||
67 | ||||||||||||||||||||||||||
68 | ||||||||||||||||||||||||||
69 | ||||||||||||||||||||||||||
70 | ||||||||||||||||||||||||||
71 | ||||||||||||||||||||||||||
72 | ||||||||||||||||||||||||||
73 | ||||||||||||||||||||||||||
74 | ||||||||||||||||||||||||||
75 | ||||||||||||||||||||||||||
76 | ||||||||||||||||||||||||||
77 | ||||||||||||||||||||||||||
78 | ||||||||||||||||||||||||||
79 | ||||||||||||||||||||||||||
80 | ||||||||||||||||||||||||||
81 | ||||||||||||||||||||||||||
82 | ||||||||||||||||||||||||||
83 | ||||||||||||||||||||||||||
84 | ||||||||||||||||||||||||||
85 | ||||||||||||||||||||||||||
86 | ||||||||||||||||||||||||||
87 | ||||||||||||||||||||||||||
88 | ||||||||||||||||||||||||||
89 | ||||||||||||||||||||||||||
90 | ||||||||||||||||||||||||||
91 | ||||||||||||||||||||||||||
92 | ||||||||||||||||||||||||||
93 | ||||||||||||||||||||||||||
94 | ||||||||||||||||||||||||||
95 | ||||||||||||||||||||||||||
96 | ||||||||||||||||||||||||||
97 | ||||||||||||||||||||||||||
98 | ||||||||||||||||||||||||||
99 | ||||||||||||||||||||||||||
100 |