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

Revision 2 of this benchmark created on

Description

Is requestAnimationFrame faster than setInterval?

Preparation HTML

<script>
  window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame
  
  })();
  
  var canvas, context;
  
  function init() {
  
    canvas = document.createElement('canvas');
    canvas.width = 256;
    canvas.height = 256;
  
    context = canvas.getContext('2d');
  
    document.body.appendChild(canvas);
  
  }
  
  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();
    
  }
  
  function animate1() {
    requestAnimFrame(animate1);
    draw();
  }
  
  function animate2() {
    window.setTimeout(animate2, 1000 / 60);
    draw();
  }
  
  init();
</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.