JS animation performance: reflow/redraw cost, CPU use? — OZONE Asylum, home of the Mad Scientists

DHTML/Javascript

JS animation performance: reflow/redraw cost, CPU use?

This page's ID: 30631

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	In my experience JavaScript is rarely, if ever, the bottleneck when doing animations. But that doesn't mean we shouldn't optimize things where we can. It is impossible to know on which device your code will run, therefore prefer [i]setTimeout( arguments.calee, delay )[/i] over [i]setInterval( foo, delay )[/i]. Usually you don't want to burn out the CPU and see the CPU load sky rocket. About reflows, I can't think of a case where moving an absolutely positionned element should trigger one. Whenever possible, things should be grouped to limit the number of HTML elements, and DOM manipulations : A few months ago, I tried a dots effect with thousands of dots, many of them moving together. I generated biiig CSS sprites and ended up just moving ~50 background images. The framerate never dropped below 50fps and there was ( visually ) several thousands of dots moving. Regarding [b]kwei[/b]'s 2nd point, I'd go one step further and avoid the function call altogether. Functions calls are expensive ( try to limit them as with certain types of animations it's easy to reach the hundreds of thousand computations/calls per second ), so unless this makes the code really ugly favor inlining the heavy duty. I ran a [url=http://poi.ribbon.free.fr/tmp/redraw_perfomance_test/]redraw perfomance test[/url] ( which is basically a simpler version of [url=http://my.opera.com/desktopteam/blog/2008/03/28/painting-performance-fixes?startidx=250]Christian 'aleto' Krebbs tests[/url] so that JavaScript has a lesser impact on the end results ). In a nutshell it simply moves some elements horizontally and add some until the framerate is stable around 25fps. [code] Number of elements processed @ 25 fps: +---------+---------+-------+-------+ \| JS only \| bg only \| GIF \| PNG32 \| +-----------------+---------+---------+-------+-------+ \| Op 9.62 10467 \| 80,225 \| 1,470 \| 700 \| 755 \| +-----------------+---------+---------+-------+-------+ \| Fx 3.1b1 \| 42,000 \| 715 \| 470 \| 420 \| +-----------------+---------+---------+-------+-------+ \| Sf 4dp2 528.1.1 \| 53,250 \| 1,425 \| 900 \| 860 \| +-----------------+---------+---------+-------+-------+ \| IE 8b2 \| 28,250 \| 370 \| 230 \| 230 \| +-----------------+---------+---------+-------+-------+ \| IE 8b2* \| 28,200 \| 945 \| 375 \| 360 \| +-----------------+---------+---------+-------+-------+ \| Cr 0.3.154.9 \| 66,750 \| 2,350 \| 2,030 \| 1,940 \| +-----------------+---------+---------+-------+-------+ * in Compatibility mode[/code][i]For the JS only runs, the elements were not appended to the DOM. This very test only served to show how JS alone doesn't cost much. Each browser was open individually with a single tab, first running a test with no sprite then one with a sprite. Closing the browser and doing the 2 other tests.[/i] Overall, the perfomance do vary greatly across browsers. But it's nice to see that PNG32 are as fast/slow as GIF images. [b]Scott:[/b] About the stacking of the snow at the bottom of the page, you could use a Canvas ( or SVG ) element to do just that and keep your CSS sprites for the snow flakes. Hope this gives a few hints. [url=http://www.p01.org/][img]http://poi.ribbon.free.fr/files/p01_ozoneasylum_sig_teapot.png[/img][/url] [small](Edited by [url=http://www.ozoneasylum.com/user/2185]poi[/url] on 11-02-2008 18:35)[/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu