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.
- 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
- Building block of the application
- Container for dynamic areas
- Has position: absolute
- Is gpu accelerated
You animate surfaces
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?
- 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
Famo.us - low level technics.
By Oleg Slobodskoi