I'm trying to dive deep into browser rendering and came up with this little demo in preparation for a talk.
I put together a animation demo where you can easily switch scheduling from requestAnimationFrame to setInterval and also positioning from top/left-based to top/left-based in combination with translate3d(0,0,0) or even entirely translate3d(x,y,z)-based.
Now I know that stranslate3d isn't a silver bullet and especially that it can become costly if applied to too many elements. However, there is one particular thing that caught my attention. If I switch the positioner from DefaultPositioner to Translate3dPositioner it seems that I get much longer Recalculate Style phases than before. I couldn't find any information about that so I'm wondering if anyone can share more info about what's going on here?
Here is the link to the demo: http://plnkr.co/edit/TKwKBk?p=preview
Just switch implementations inside the app.js file.
One more thing: When you click on resume to kick off the demo, you should wait a little bit until all boxes moved a bit apart. I know it's a poor demo ;-)
