requestanimationframe vs setInterval vs setTimeout

JavaScript performance comparison

Revision 7 of this test case created by

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 < 10000000) {
      i++;
    }
  };
  
  function callback_anitmate() {
    animate();
    deferred.resolve();
  }
  
  function callback_interval() {
    animate();
    clearInterval(intervalId);
    deferred.resolve();
  }
  
  function callback_timeout() {
    animate();
    deferred.resolve();
  }
  
  window.intervalId = null;

};
</script>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
requestAnimationFrame
// async test
requestAnimationFrame(callback_anitmate);
pending…
setInterval Loop
// async test
window.intervalId = setInterval(callback_interval, 1000 / 60);
pending…
timeout Loop
// async test
setTimeout(callback_timeout, 1000 / 60);
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.

0 Comments