Avoid recalc style.

Test editing script directly in DevTools – Chrome will update executing on the fly.

Enable Continuous paint mode - tell Chrome to paint over and over again.

Toggle CSS in Devtools and watch what it does to performance in Timeline.

instead top: -106px

Recalculate style:

* Get all the style rules

* Evaluate the selectors and match against DOM

* Selector matching cost is here, typically \<1O% of time

* Calculate the computed style for every element

H to Hide selected elem to figure out which elements is affecting paint.

Layout trashing = Recalc -> Layout -> Recalc -> …



Webpage test