Perf: runtime Rendering & jankyness

[jamischarles]

Great great explanation of de tools rendering events etc http://youtube.com/watch?v=9xjpmpX4NJE

How Browsers work: https://github.com/jamischarles/hydra/issues/40

[jamischarles]

Csstriggers.com

[jamischarles]

http://youtube.com/watch?v=RCFQu0hK6bU Render timing etc

[jamischarles]

Render perf course https://www.udacity.com/course/browser-rendering-optimization--ud860

[jamischarles]

Jank free.org

[jamischarles]

How painting etc works http://youtube.com/watch?v=YyQYhhy1dZI

[spacerockzero]

I've got some good ones together on this micro-badge page: https://github.com/fs-webdev/skill-building-program/blob/master/badges-active/performance/_micro_rendering-performance.md

[spacerockzero]

Great vid links you got. I hadn't seen one of them!

[spacerockzero]

justice.js may be a helpful tool for rendering perf as well, as it has an fps meter embedded in it: https://github.com/okor/justice

[jamischarles]

@spacerockzero Thanks. I watched most yesterday while W@H. Especially the first one was really great at explaining things that are generally very confusing in the tools but extremely useful.

[jamischarles]

https://www.youtube.com/watch?v=QU1JAW5LRKU Paul Lewis profiles the JSConf.eu site in 8 min and fixes jank. Great demo and FPS quick intro.

[spacerockzero]

Chrome dev tools docs and vids are sometimes out of date, but this page is decent on the topic: https://developer.chrome.com/devtools/docs/demos/too-much-layout/index

[spacerockzero]

Sweet. That last one was shown on perf-tooling.today and perf.rocks recently.

[jamischarles]

http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

Google I/O 2013 - True Grit: Debugging CSS & Render Performance https://www.youtube.com/watch?v=gqc88qWuiI4

[spacerockzero]

Somewhat related: Lara Hogan's "Designing for Performance" book is now available free online: http://designingforperformance.com/