requestanimationframe vs setInterval

JavaScript performance comparison

Revision 5 of this test case created by Eric Pinxteren

Info

The test must stop at some time..

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    if (!window.requestAnimationFrame) {
   
      window.requestAnimationFrame = (function() {
   
        return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
   
          window.setTimeout(callback, 1000 / 60);
   
        };
   
      })();
    }
   
    window.animate = function animate() {
      var i = 0;
      while (i < 10000) {
        i++;
      }
    };
   
    window.stopCounter;
};
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
requestAnimationFrame
// async test
stopCounter = 1000;
requestAnimationFrame(function x() {
  if (!stopCounter) {
    deferred.resolve();
    return;
  }
  stopCounter -= 1;

  animate();
  window.requestAnimationFrame(x);
});
pending…
setInterval Loop
// async test
stopCounter = 1000;

function run() {
  setInterval(function() {
    if (!stopCounter) {
      deferred.resolve();
      return;
    }
    stopCounter -= 1;

    animate();
    run();
  }, 1000 / 60);
}
run();
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment