5 things
you (probably)didn't know
about
rendering Performance
I'm not an expert
I'M just curious
And share my findings with you
RequestAnimationFrame
Lame!!11!!!11!!
(I usd that thousand times before)
But you know why?
What does 60 FPS actually mean?
Animations happen inside our head
Things are smooth if they refresh 60 times per second
each frame is one time the browser updating things on the screen
If we want 60 Frames per second we have a budget of 16.7 ms per Frame
to do
ALL THE THINGS
So,
how did we animate
in the old days?
setInterval(moveMyCheese, 16)
Sounds reasonable, no?
what's the problem?
setInterval/setTimeout
doesn't know when the browser is ready to paint
skipped Frames
Also:
higher Battery consumption
+
higher CPU usage
Demo
Go Deeper
Paint Boundaries
Small CHanges
can cause
large Paints
Layers to the rescue
TREATED AS A GRAPHIC
Avoid Repaints entirely
Demo
translateX/Y
vs
translate3d
vs
translate3d
both force an element
to be handled by
the GPU
it becomes a new layer
treated as a graphic
So why use translate3d
even for 2d operations?
A regular translate Creates/Removes the Extra layer every time
translate3d keeps the layer around, hence less paints!
Demo
http://plnkr.co/edit/h5ADxM
Layout boundaries
(by Wilson Page / FTLabs)
Layout = positioning elements
changes in one area can cause bigger areas to also cause layouts
Scope it
properties
for layout boundaries
display: block
position: relative | absolute
overflow:hidden;
height: (can't be percentage value);
width: (only required if position absolute)
Further reading
http://wilsonpage.tumblr.com/post/58645936632/layout-boundaries
Compound styles
Measure impact of styles with continuous repaint mode
Border-radius + Box-shadow
=
Slow
Flexbox
Is a joy to use
Makes our live so much easier
But also slower
(at least on some platforms)
Further Reading
http://coding.smashingmagazine.com/2013/05/23/building-the-new-financial-times-web-app/
5 things you didn't know about rendering Performance
By cburgdorf
