Famo.us

Low level technics.

by Oleg Slobodskoi

@oleg008

Engine.nextTick

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

Entire framework uses it for rendering and animations.

requestAnimationFrame

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

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

Surface

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

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

Virtual DOM

Surface renders to DOM (currently)
Surface reuses Elements
Faster http://jsperf.com/re-using-dom-objects-vs-creating-new-ones
Saves memory - uses a pool of elements (ElementAllocator)
Render tree management (RenderNode)

Don't touch it

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

Questions?

Famo.us - low level technics.

By Oleg Isonen

Famo.us - low level technics.

3,149

Oleg Isonen