0

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.

Mathieu Garaud
  • 85
  • 1
  • 5

1 Answers1

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.

Ariya Hidayat
  • 12,523
  • 3
  • 46
  • 39
  • Thanks for the tip I updated my code do you think that I could do better than this version? – Mathieu Garaud Jan 12 '13 at 14:15
  • If you are already using CSS transition, there is no need for translate3d anymore (translate will do just fine) as the elements will be GPU composited already. – Ariya Hidayat Jan 12 '13 at 19:07
  • More details: http://www.slideshare.net/ariyahidayat/understanding-hardware-acceleration-on-mobile-browsers-13463369. – Ariya Hidayat Jan 12 '13 at 19:08