requestAnimationFrame vs setInterval (Paul Irish - code) (v6)

Revision 6 of this benchmark created by Maksims Mihejevs on

Description

Is requestAnimationFrame faster than setInterval? Make 32 samples for each method per each probe.

Preparation HTML

<script>
  var canvas, context;
  
  canvas = document.createElement('canvas');
  canvas.width = 256;
  canvas.height = 256;
  
  context = canvas.getContext('2d');
  
  document.body.appendChild(canvas);

  window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame
  })();

  function draw() {
    context.beginPath();
    context.strokeStyle = '#f00';
    context.moveTo(0, 0);
    context.lineTo(canvas.width, canvas.height);
    context.stroke();
  }

  var samples = 32;

  function animate1() {
    var i = samples;
    function run1() {
      if (! --i) return;
      requestAnimFrame(run1);
      draw();
    }
  }

  var f = 1000 / 60;
  function animate2() {
    var i = samples;
    function run2() {
      if (! --i) return;
      window.setTimeout(run2, f);
      draw();
    }
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
requestAnimationFrame
animate1();
ready
setInterval
animate2();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.