requestAnimationFrame before or after execution

Benchmark created by molokoloco on

Preparation HTML

<div id="info">
</div>
<br />
<canvas id="canvas" width="1024" height="1024">
</canvas>

Setup

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);
        };
      })();
    }
    
    var info = document.getElementById('info');
    info.innerHTML = navigator.userAgent;
    var context = document.getElementById('canvas').getContext('2d');

Test runner

Ready to run.

Testing in
TestOps/sec
Before
var startTime = Date.now(),
    lastCurrentTime = 0;

function animate() {
  requestAnimationFrame(animate);
  loop();
}

function loop() {

  var currentTime = (Date.now() - startTime) / 1000;
  context.fillStyle = 'rgba(0,255,0,0.5)';
  var xx = (currentTime * 200) % 1024;
  var yy = Math.floor((currentTime * 200) / 1024) * 20;
  yy += (currentTime - lastCurrentTime) * 2000;
  context.fillRect(xx, yy, 4, 4);
  lastCurrentTime = currentTime;
}

animate();
ready
After
var startTime = Date.now(),
    lastCurrentTime = 0;

function animate() {
  loop();
  requestAnimationFrame(animate);
}

function loop() {

  var currentTime = (Date.now() - startTime) / 1000;

  context.fillStyle = 'rgba(0,255,0,0.5)';

  var xx = (currentTime * 200) % 1024;
  var yy = Math.floor((currentTime * 200) / 1024) * 20;
  yy += (currentTime - lastCurrentTime) * 2000;
  context.fillRect(xx, yy, 4, 4);

  lastCurrentTime = currentTime;

}

animate();
ready

Revisions

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

  • Revision 1: published by molokoloco on