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

Revision 5 of this benchmark created on

Description

Is requestAnimationFrame faster than setInterval?

Preparation HTML

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

Test runner

Ready to run.

Testing in
TestOps/sec
requestAnimationFrame
window.requestAnimFrame = (function() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame

})();


function animate1() {
  window.requestAnimFrame(animate1);
  draw();

}

function draw() {

  var time = new Date().getTime() * 0.002;
  var x = Math.sin(time) * 96 + 128;
  var y = Math.cos(time * 0.9) * 96 + 128;

  context.fillStyle = 'rgb(245,245,245)';
  context.fillRect(0, 0, 255, 255);

  context.fillStyle = 'rgb(255,0,0)';
  context.beginPath();
  context.arc(x, y, 10, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();

}

  animate1();
 
ready
setInterval
function animate2() {
  window.setTimeout(animate2, 1000 / 60);
  draw();
}

function draw() {
  var time = new Date().getTime() * 0.002;
  var x = Math.sin(time) * 96 + 128;
  var y = Math.cos(time * 0.9) * 96 + 128;

  context.fillStyle = 'rgb(245,245,245)';
  context.fillRect(0, 0, 255, 255);

  context.fillStyle = 'rgb(255,0,0)';
  context.beginPath();
  context.arc(x, y, 10, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();

}

  animate2();
 
ready

Revisions

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