Low level technics.

by Oleg Slobodskoi





Engine.nextTick allows to queue tasks to be executed by the next animation frame.


Entire framework uses it for rendering and animations.



  • Tries to call your function at 60FPS
  • Draws at the next available opportunity
  • Degrades frame rate based on load
  • May stop f.e. when window is unfocused


Layout calculation is expensive.


Avoid nesting

  • Step back from html semantics and relative positioning
  • Semantic structure doesn't make sense if elements are positioned absolutely
  • Overhead from positioning elements relatively is big
  • Use javascript layout system to position surfaces


  • Building block of the application
  • Container for dynamic areas
  • Has position: absolute
  • Is gpu accelerated
  • Javascript layout system for positioning
  • You animate surfaces

Avoid repaints

  • Use scale transformation for size animations.

  • Use translate transformation for position animations.

  • There is rotate, scale, skew, translate and those 3d versions

  • matrix/matrix3d can describe all of them, just faster  http://jsperf.com/css-matrix-vs-transform-primitives/13

  • Transform class provides a human abstraction for matrix3d


DOM is slow, but what can we do about it?

Virtual DOM

Don't touch it

  • Never read
  • Writes scheduled through animation frame
  • Stylesheets for static declarations only


Famo.us - low level technics.

By Oleg Isonen

Famo.us - low level technics.

  • 2,060
Loading comments...

More from Oleg Isonen