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

http://plnkr.co/edit/VmeaVc




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




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/

Made with Slides.com