1 | <!DOCTYPE html>
|
2 | <html>
|
3 | <head>
|
4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
5 | <title>Aphrodite Benchmark</title>
|
6 | <script type="text/javascript" src="./dist/aphrodite.umd.js"></script>
|
7 |
|
8 | <script type="text/javascript">
|
9 |
|
10 | var runs = 10000;
|
11 | var styles = new Array(runs);
|
12 | for (var i = 0; i < runs; i += 1) {
|
13 | const style = {
|
14 | [`a${Math.random()}`]: {
|
15 | display: 'flex',
|
16 | transition: 'all 0s',
|
17 | alignItems: 'center',
|
18 | WebkitAlignItems: 'center',
|
19 | justifyContent: 'center',
|
20 |
|
21 | ':after': {
|
22 | content: 'foo',
|
23 | }
|
24 | },
|
25 |
|
26 | [`b${Math.random()}`]: {
|
27 | [`a${Math.random()}`]: Math.random(),
|
28 | [`b${Math.random()}`]: String(Math.random()),
|
29 | [`c${Math.random()}`]: String(Math.random()),
|
30 | },
|
31 |
|
32 | [`c${Math.random()}`]: {
|
33 | [`a${Math.random()}`]: Math.random(),
|
34 | [`b${Math.random()}`]: String(Math.random()),
|
35 | [`c${Math.random()}`]: String(Math.random()),
|
36 | },
|
37 | };
|
38 | styles[i] = style;
|
39 | }
|
40 | </script>
|
41 |
|
42 |
|
43 | <script type="text/javascript">
|
44 |
|
45 | eval('');
|
46 |
|
47 | var processedStyles = new Array(styles.length);
|
48 | performance.mark('start_stylesheet_create');
|
49 | for (var i = 0; i < styles.length; i += 1) {
|
50 | processedStyles[i] = aphrodite.StyleSheet.create(styles[i]);
|
51 | }
|
52 | performance.mark('end_stylesheet_create');
|
53 |
|
54 | performance.mark('start_css');
|
55 | for (var i = 0; i < processedStyles.length; i += 1) {
|
56 | aphrodite.css(Object.values(processedStyles[i]));
|
57 | }
|
58 | performance.mark('end_css');
|
59 |
|
60 | performance.measure('StyleSheet.create()', 'start_stylesheet_create', 'end_stylesheet_create');
|
61 | performance.measure('css()', 'start_css', 'end_css');
|
62 | performance.clearMarks();
|
63 | </script>
|
64 | </head>
|
65 |
|
66 | <body>
|
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 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 | </body>
|
125 | </html>
|