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	OK, this is a rather open-ended JS performance question, but one I imagine many people have wondered about. I've been considering redoing a "snow" script which I wrote many years ago, my main gripe with it (and others) is the CPU use; perhaps it's simply expensive to redraw many elements, but the performance numbers seem to vary widely between browsers. The [url=http://schillmania.com/projects/snowstorm/]current implementation[/url] varies in CPU use depending on browser, from what I've seen - eg. 40% on Safari and Opera, perhaps using better redraw/reflow methods or hardware acceleration (?) vs. 90% in Firefox 3, on Mac OS X. I wrote this in 2003 and the animation has always been fairly smooth, but it is at the expense of CPU. I'm unsure if this is simply a browser DOM/reflow/layout efficiency thing we'll eventually see improvements in (eg. as with JS engines recently), or if there are things that can be done in the code which will make it noticeably faster. I'm currently creating a bunch of <img> elements which I append to a document fragment, and then finally append to the document. They're absolutely-positioned, and the script runs through something like.. for (var i=this.snow.length; i--;) { this.snow[i].move(); } .. Which simply increases the individual objects' x and y properties, sets the left/top position etc. This is obviously convenient for me, but expensive in terms of CPU given I'm moving so many elements at once. The number of elements being moved changes as flakes hit the bottom of the screen and "stick", etc. The core animation loop is a setInterval(), 20 msec. I was thinking perhaps putting the snowflakes into a few common parent containers and then moving those around would improve things - eg., 4 abs-positioned <div> elements with a number of absolutely-positioned snowflakes, thus I'm only actually moving four elements via script - but that also seems to be fairly expensive CPU-wise as presumably the browser has to redraw all of those absolute child elements. Even moving a single absolutely-positioned <img> element seems to have a fairly high CPU cost ([url=http://www.schillmania.com/content/projects/javascript-animation-2/demo/]setInterval() demo[/url], 20% CPU in Firefox, 9% in Safari, 5% in Opera?) Perhaps explicitly specifiying width and height, providing background colors and/or setting overflow:hidden might help any of these things, I haven't done any serious experimenting specifically with large amounts of animated elements such as this. Anyone else have some good stories/findings? :) [small](Edited by [url=http://www.ozoneasylum.com/user/2276]Scott[/url] on 11-01-2008 19:57)[/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu