StyleSheet: perf characteristics

[necolas]

After discussing this with @vjeux I thought of a few more things to include in a performance evaluation of inline styles vs class names.

• inline styles vs class names
• perf celing of StyleSheet creating a large string in memory
• perf ceiling of StyleSheet updating a single <style> element's content (and does the browser recalc everything when you do so?)

[necolas]

@vjeux shared some finding with me about how Chrome performs:

inserting a dom tree (newsfeed story) and matching it against a ton of css is relatively cheap (3-5ms). doing the same with inline styles is about 2x faster (1-3ms).
the biggest performance hog for css is inserting new stylesheets. it takes anywhere from 30ms to 100ms. the more elements are in the dom and stylesheets you add, the more expensive adding another stylesheet becomes.
there's one caveat. all rules are not equal performance wise. if you add only rules that are just a single class .a {}, then you can add 2k at a time and it is super cheap (1-5ms). but if you have rules that have a nested selector like .a .b {} then that's where it starts taking a ton of time.

This means injecting single classes like react-native-web has been doing should perform fine in Chrome. However, inline styles appear to be very cheap in Chrome too. And they avoid potentially creating very large strings when producing the style sheet.

[vjeux]

Actually, I'm sorry but this was a completely busted analysis. I later found out what was really happening.

So, when you inject stylesheets, there's a fast path that checks every rule against the current DOM and if it matches, then flags the dom node as dirty and dirties the entire subtree. This check is very crude, if you have a rule .someClass .someOtherClassThatDoesntExist and there's an element with someClass class, it'll flag it.

Then, the expensive part is to re-compute the styles of all the elements that are dirty. This scales linearly with the number of dom nodes. If you end up dirtying the root element (we have a ton of top level classes on facebook.com like hasLeftCol home composerExpanded fbx chrome webkit mac x2 Locale_en_US), then it'll take a long time.

Also, note that you only need one rule that dirties a big tree to pay the cost for the entire stylesheet you inject.

[necolas]

Ouch, that sounds much worse. Inline styles it is!