Home/ Questions/Q 9154937
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T12:30:36+00:00

I develop a small application to test CSS3 and translate3d. The idea is to

  • 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0