Why runtime performance matters
Retain users
Better user experience
Better usage of device resources
Slide 7
Slide 7 text
How the browser renders at runtime - the pixel pipeline
Slide 8
Slide 8 text
How the browser renders at runtime - the pixel pipeline
Slide 9
Slide 9 text
How the browser renders at runtime - the pixel pipeline
Slide 10
Slide 10 text
How the browser renders at runtime - Frame rates
60fps is required for a non janky , silky smooth UI
The browser takes ~16ms to make a frame
We have ~12ms on our part to make a frame
Slide 11
Slide 11 text
JAVASCRIPT
Analyse JavaScript performance with devtools
Offload long running tasks to web workers
Write memory efficient applications
Demos here runtime-talk.katifrantz.com
Slide 12
Slide 12 text
RECALCULATING STYLES AND LAYOUT
Use better selector matching. Use BEM
The less elements affected, the better.
Demos here runtime-talk.katifrantz.com
Slide 13
Slide 13 text
RECALCULATING STYLES AND LAYOUT
➔Watch out for forced synchronous layout
Demos here
runtime-talk.katifrantz.com
Slide 14
Slide 14 text
PAINT AND COMPOSITE
Avoid paint when you can. It’s expensive
Promote elements with will-change
Stick to transform and opacity for animations
Slide 15
Slide 15 text
RESOURCES
Udacity free courses on web performance
Google web fundamentals
Me