Databases
StackOverflow2013
Postsdbo
PORaphael: Gradual animation slowdown with simple infinite animation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORaphael: Gradual animation slowdown with simple infinite animation
    text
    copied!<p>This question is similar in spirit to this other question, asked two years ago: <a href="https://stackoverflow.com/questions/2733613/why-does-raphaels-framerate-slow-down-on-this-code">Why does Raphael&#39;s framerate slow down on this code?</a></p> <p>I'm using Raphael 2.1.0 in Chromium 25 in the following way:</p> <pre class="lang-html prettyprint-override"><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Drawfun&lt;/title&gt; &lt;style&gt; * { margin: 0; padding: 0; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;script src="raphael.js"&gt;&lt;/script&gt; &lt;script&gt; var paper = Raphael(10, 50, 320, 200); var anim = Raphael.animation({transform: "R360"}, 500).repeat(Infinity); var rect = paper.rect(50, 40, 10, 20); rect.attr("fill", "#f00"); rect.attr("stroke", "#fff"); rect.animate(anim); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Initially, the rectangle spins smoothly, as one would expect. After a minute or two, the rotation is running at ~15 FPS. After five or eight minutes, the animation is running at ~5 FPS.</p> <p>Chrome CPU profiles indicate that as the animation becomes more choppy, the script is spending less and less time in <code>(program)</code> and more and more time in <code>repush</code> and <code>eve.listeners</code>.</p> <p>The Chrome task manager doesn't indicate that there's a memory leak, either in the JS memory pool or in Chrome's, but does reveal that the page consumes more and more CPU over time.</p> <p>When running that page in a recent version of Firefox, the animation becomes choppy much, much more quickly. These results have been verified on Linux and Windows, so it's not an OS issue :).</p> <p>Does anyone have any insight into what might be wrong with either my code or Raphael's internals?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload