Measure and improve performance about container-query HOT 5 CLOSED

cssText could be something worth checking out:
http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

from container-query.

Also: https://developer.mozilla.org/en-US/docs/Web/Events/resize

from container-query.

It's probably worth replacing the style applying process with a css-in-js solution, like Styletron: https://github.com/rtsao/styletron

from container-query.

Currently only the selectors are stored in the container configurations on runtime, and whenever adjustment is triggered, querySelectorAll searches for elements inside the container.
This was designs this way so that dynamically added elements are recognised too.

If this proves to be a bottleneck, then it could be refactored to refresh elements from the selectors in the configuration when a new node is inserted to the DOM. (MutationObserver?)
There could also be a refresh() method on Container instances, to manually trigger this, if the user is fully in control of the DOM, so then there's no need to listen to events.
For example: after React render(), the container could check to see if there were new elements inserted or not.

from container-query.

Perceived performance should be measured with Chrome's timeline tool: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool

from container-query.