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,111