Raphael.js -- the script seems light, but the execution is heavy -- why?

Question

I am using Raphael 2.01, Firefox 12.0, on Windows XP.

I've tried continuous object motion (not tween animation). I think the load by my script is light, but the sound of the PC's cooling fan will be loud!

I want to know the reason and solution.

(steps)

• I set several circle objects (5 to 10) on the document.

• They move on. When they touch the edge of the document, they return(move opposite direction), but their motion will slow down.

• When I check the PC's load in Google Chrome's task manager, the memory usage becomes bigger and bigger (40MB ===> 150MB ===> ... )

(script)

http://jsfiddle.net/JsL46/3/

* Sorry. When I paste the code to the "jsfiddle", circle objects appear but they do not run.

Answer 1

RaphaelJS does animation using traditional style changes and offsets, which causes alot and repaints and reflows. Use SVG SMIL animation to reduce the load on the browser for simple cases such as left/right movement.