https://www.youtube.com/watch?v=HAqjyCH_LOE)

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 -> …

\https://www.chromestatus.com/metrics/css/popularity\

\https://docs.google.com/spreadsheet/pub?key=0ArK1Uipy0SbDdHVLc1ozTFlja1dhb25QNGhJMXN5MXc&single=true&gid=0&output=html\

Webpage test