performance considerations

[threepointone]

parent issue/scratchpad for all things perf

things that can affect performance

• many rules
• many unused rules
• hashing
• large ranges of rules in short period of time (like animations, or app startup)

things to lookout for

• selector performance
• cpu cycles
• memory / gc pressure
• redraws/reflows

things that can help

• static optimizations (possible static optimizations  #2)
• recover unused rules
• cache cache cache

[threepointone]

Got a huge win by using 'insertRule' in production, anywhere from 10-2000x.

[JakeCoxon]

Any ideas on recovering unused rules? I like to write css as a function of state like state => style({ color: state.color }) but this has potential to create a bunch of unused rules.

My idea is to keep track of what elements are actually using the rules and discard those rules if they aren't. We can do this with mutation observer, it would keep this library from being react specific which could be nice. But it may be pretty shitty for performance so needs some tests. I can look into it if you want to head in this direction?

[threepointone]

There's an experimental keyed(key, style) that reuses rules with the same key, that might help. That said, I thought a bunch about removing unused rules, and it didn't make much sense to me for css (and is really hard to implement right, especially when using in shared environments).
Some more thoughts here #1 (comment) and I'll be validating some of those theories here #13

[threepointone]

perf is 'mostly solved' over the last few releases. closing.

[eladmoshe]

@threepointone as a newcomer, I am really interested to see some info what to expect performance wise (compared to plain CSS). I see there is a placeholder for that in the docs but it appears to be empty. Some benchmarking would be even better.
As migrating existing project to Glamor is a big investment, it would be reassuring to know what to expect.