Recently I programmed an animation in javascript, css, and html. It uses the DOM model to scale images. This animation is riding a motorcycle through the woods, and as such everthing is coming at you, being scaled. There layers that overlap for each movement, 3 tree layers, 3 whoops layers, and 1 roadsign layer. The other objects are static. I developed it on my amd phenom x4 machine, with a ati graphics 6450 card and 8 gig of ram. The animation runs 8 seconds using firefox at a 20 f/s. rate. I have an older linux mint debian edition desktop, 64 bit. So it looked great, really like the woods, fantastic.<p>But oh nooooooo..... I moved to my windows system, same machine. Tried the animation using IE9, Opera, Firefox, Chrome, and Safari browsers to test it all out. Here's my results:<p>Opera under 8 seconds<p>Firefox 8 seconds more or less<p>IE 9 just over 8 seconds<p>Chrome 24 seconds!<p>Safari 24 seconds as well.<p>Well okay it had to be the windows edition of chrome, I can't update my mint desktop, support ended.<p>Well okay I have another computer, amd 64 x2, 4 gig of ram, and onboard hd video from nvidia, with the new linux mint desktop, which isn't bad, but not my daily driver. new results...roughly the same. Firefox stuttered a bit, not suprising given the quick frame rate. Chrome, 3x longer easily.<p>So it wasn't the OS. I moved the javascript file and stuff to my Windows 7 desktop. I disabled all but one of the layers that scales, it made no difference at all to the speed of the rendering on Chrome. The other browsers all seem to render it at 20f/s
(except Safari, big suprise).<p>So I have to wonder what the problem is.<p>Here's a link to the file:(update:sorry no hard link)
http://sjer.org/dual_sport/animation1/animation.html<p>Try it for yourself, comments are appreciated!<p>How can we move forward with the web with performance like this??<p>node.js, won't solve this problem.