requestAnimationFrame vs setInterval (Paul Irish - code)

Benchmark created by Gianluca Guarini on

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();
  animate();
</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 animate() {
  requestAnimFrame(animate);
  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();

}
ready
setInterval
function animate() {
  window.setTimeout(animate, 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();

}
ready

Revisions

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