Add performance comparison/benchmarks

[EugeneKramer]

Could a performance comparison/benchmark reference for constructible style sheets with Chrome 73 be added?

I could find no readily available benchmarks.

[nolanlawson]

Based on my testing, there is a small performance benefit in Chrome for using constructable stylesheets provided the following conditions are true:

1. The same component with the same styles is inserted into the DOM multiple times.
2. The CSSStyleSheet object is not recreated each time.

Here is a basic benchmark. In Chrome 90 on my MacBook, I'm seeing roughly ~65ms for <style> compared to ~50ms for constructable stylesheets, when inserting 1,000 duplicate components. The numbers are magnified if you insert more components, or if you turn on the Chrome DevTools CPU throttling.

Note that my benchmark does a simple this.shadowRoot.adoptedStyleSheets = [sheet], i.e. no calling adoptedStyleSheets.includes() to check for duplicates, or adoptedStyleSheets = [...adoptedStyleSheets, sheet] to copy the FrozenArray. These add a small overhead (#120 (comment)).

Also note that this benchmark is measuring the full render time using a requestPostAnimationFrame polyfill, although the perf benefit doesn't come from style/layout, since Chrome already seems to be smart enough about handling duplicate <style>s under the hood. The perf benefit appears to come from simply bypassing the DOM and not creating and inserting extra <style> elements.

Also note that this benchmark uses vanilla DOM operations. If your framework of choice uses virtual DOM or some other mechanism to create the <style> tags, then the relative benefit of constructable stylesheets would probably be greater.

Edit: For the record, in Firefox Nightly 90 with the constructable stylesheets config flag enabled, I'm also seeing a small benefit in this benchmark: ~29ms for <style> versus ~25ms for constructable stylesheets. Obviously this difference is even smaller than the Chrome difference, but it seems consistent.