Optimisation Rendering Webkit with GPU Acceleration

Question

I develop a small application to test CSS3 and translate3d. The idea is to render several DIVs moving randomly on the screen. It's kind of particle system, I know I could probably use WebGL or Canvas to have better performances but I also want it to work smoothly on mobile browsers hence I thought that DOM manipulation would be better for performances.

You will find the result after a couple of hours at this url

I'd like to reach the best performance possible to increase the number of DIVs.

But here is my problem, I have a "rendering issue" that I spotted when I used TimeLine on Chrome or Safari. From time to time the whole page is rendered generating a small lag perceptible on Safari iPhone or Chrome Android+iPhone.

So if one of you one is up for the challenge don't hesitate I tried many things but I didn't figure out how to avoid this expensive redraw.

BTW, if one of you have extra ideas to optimize this snippets don't hesitate to reply.

Thanks

---------- UPDATE 1 ----------

Based on Ariya advices I updated by code (url) and added another test using only top/left. Based on the FPS counter provided by Chrome I can see that the fps is more stable using top/left properties with almost the same framerate. Do you have any idea if I could optimize the CSS3 version to have even better performances? I though that css3 with GPU Acceleration would be faster I probably did something wrong.

---------- UPDATE 2 ----------

I updated my code to use requestAnimFrame and only fire it when I need to redraw. And I found what is killing the perf gray gradient background that I defined in the css was redraw often and killing the performance. However top/left seems still better than CSS transition :( from a pure performance point of view.

Answer 1

When looking at the Timeline profile in Google Chrome's Developer Tools, it's evident that there is a lot of style recalculation. This is to be blamed at this particular line:

      lastSheet.insertRule('@-webkit-keyframes '+keyframeName+' { ....

In other words, continuously changing the style sheet is expensive. Since the element animation in this example is about moving them around, rather than using keyframe-based animation I would recommend simplifying to simple transition.