Commit 7ea7254
committed
Optimize mapObj
I did some profiling of StyleSheet.create and noticed that mapObj was a
good target for optimization.
Methodology
I created an HTML document with the following code in it:
```html
<script type="text/javascript" src="./dist/aphrodite.umd.js"></script>
<!-- setup -->
<script type="text/javascript">
// build up an array of styles objects to run our test on
var styles = [];
for (var i = 0; i < 10000; i += 1) {
styles.push({
[`a${Math.random()}`]: {
[`a${Math.random()}`]: Math.random(),
[`b${Math.random()}`]: String(Math.random()),
[`c${Math.random()}`]: String(Math.random()),
},
[`b${Math.random()}`]: {
[`a${Math.random()}`]: Math.random(),
[`b${Math.random()}`]: String(Math.random()),
[`c${Math.random()}`]: String(Math.random()),
},
[`c${Math.random()}`]: {
[`a${Math.random()}`]: Math.random(),
[`b${Math.random()}`]: String(Math.random()),
[`c${Math.random()}`]: String(Math.random()),
},
});
}
</script>
<!-- test -->
<script type="text/javascript">
setTimeout(() => {
performance.mark('start_run');
for (var i = 0; i < styles.length; i += 1) {
// prevent caching optimizations
eval('');
performance.mark('start_stylesheet_create');
aphrodite.StyleSheet.create(styles[i]);
performance.mark('end_stylesheet_create');
performance.measure(
'aphrodite.StyleSheet.create',
'start_stylesheet_create',
'end_stylesheet_create'
);
performance.clearMarks('start_stylesheet_create', 'end_stylesheet_create');
}
performance.mark('end_run');
performance.measure(`Benchmark ${styles.length}`, 'start_run', 'end_run');
performance.clearMarks();
});
</script>
```
Then, looking at the timeline tool in Chrome, I loaded the page a few
times before and after this change. Similarly, I ran a CPU profile
before and after this change through 5 page reloads each.
In this test, the timeline was not very helpful, I think because of the
testing overhead. However, the CPU profile was very clear. Before this
change, normalizing for the callback showing up in a different part of
the profile, `mapObj` took ~317ms and after this change, it drops to
~211ms. `StyleSheet.create` drops from ~755ms to ~670ms or roughly 11%
faster. The rest of the time in `StyleSheet.create` is spent in
`murmurhash2_32_gc` and `hashObject`.1 parent e30ed7b commit 7ea7254
1 file changed
Lines changed: 9 additions & 10 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
10 | 10 | | |
11 | 11 | | |
12 | 12 | | |
13 | | - | |
14 | | - | |
15 | | - | |
16 | | - | |
17 | | - | |
18 | | - | |
19 | | - | |
20 | | - | |
21 | | - | |
22 | 13 | | |
23 | 14 | | |
24 | 15 | | |
25 | | - | |
| 16 | + | |
| 17 | + | |
| 18 | + | |
| 19 | + | |
| 20 | + | |
| 21 | + | |
| 22 | + | |
| 23 | + | |
| 24 | + | |
26 | 25 | | |
27 | 26 | | |
28 | 27 | | |
| |||
0 commit comments