TL DR
What causes Recalculate Style in Chrome and what can be done to reduce the time for this step?
Background
In an application with many elements (a variable, for example, 10,000), I observe Recalculate the style , taking a lot of time when adding a class to the parent element of these elements. There are selectors that will affect the elements of each subtree when the container has this class.
In the developer tools, I was able to trace the cause of the Recalculate Style event by clicking here (MCVE screenshot):
From name to name, I assume that this step involves calculating the effective (final) style of the element. I think this happens when
CSS .
MCVE , HTML, .change .container click - .
MCVE , , . , .
, CSS. 10 000 .
, , CSS, .