requestanimationframe vs setInterval vs setTimeout

JavaScript performance comparison

Revision 7 of this test case created

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 unknown unknown
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. Here’s a list of current revisions for this page:

0 comments

Add a comment