UNPKG

2.23 kBHTMLView Raw
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<!-- setup -->
8<script type="text/javascript">
9// build up an array of styles objects to run our test on
10var runs = 10000;
11var styles = new Array(runs);
12for (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<!-- test -->
43<script type="text/javascript">
44// prevent caching optimizations
45eval('');
46
47var processedStyles = new Array(styles.length);
48performance.mark('start_stylesheet_create');
49for (var i = 0; i < styles.length; i += 1) {
50 processedStyles[i] = aphrodite.StyleSheet.create(styles[i]);
51}
52performance.mark('end_stylesheet_create');
53
54performance.mark('start_css');
55for (var i = 0; i < processedStyles.length; i += 1) {
56 aphrodite.css(Object.values(processedStyles[i]));
57}
58performance.mark('end_css');
59
60performance.measure('StyleSheet.create()', 'start_stylesheet_create', 'end_stylesheet_create');
61performance.measure('css()', 'start_css', 'end_css');
62performance.clearMarks();
63</script>
64</head>
65
66<body>
67 <!--
68 StyleSheet.create before:
69
70 185
71 165
72 166
73 165
74 165
75
76
77 average: 170
78
79 StyleSheet.create after:
80
81 138
82 152
83 153
84 148
85 148
86
87 average: 148
88
89 15% faster
90
91 css before:
92
93 1750
94 1740
95 1810
96 1790
97 1780
98
99 average: 1774
100
101 css after:
102
103 836
104 850
105 863
106 846
107 853
108
109 average: 850
110
111 109% faster
112
113 1780
114 1900
115 1720
116 1700
117 1770
118
119 average: 1774
120
121
122 -->
123
124</body>
125</html>