requestIdleCallback timing guarantees

rIC.js

var lastFlushed = undefined;

function floodScheduler(n) {
  for (var i = 0; i < 10; i++) {
    for (var j = 0; j < n; j++) {
      var fn = function logPos(i, j) {
        var thisFlush = (i * n) + j;
        if (lastFlushed || lastFlushed === 0) {
          if (lastFlushed + 1 !== thisFlush) {
            console.error('Order MisMatch', lastFlushed, thisFlush, i, j);
          }
        }
        lastFlushed = thisFlush;
      }.bind(null, i, j)
      
      setTimeout(fn, i);
    }
  }

  var now = performance.now();
  
  for (var id = 0; id < 10; id++) {
    var fn = function logIdlePos(start, i) {
      var elapsed = performance.now() - start;

      // we allow a little jiggle
      if (elapsed > i + 5) {
        console.error('Idle Callback Delayed Too Long', start, elapsed, i);
      }

      lastFlushed = 'idle-' + i;
    }.bind(undefined, now, id);

    requestIdleCallback(fn, { timeout: id });
  }
}

floodScheduler(10000);

Showing that with raf we can still get 60FPS despite pushing 15.5ms of work within it.

window.stopTest = false;
window.lastFlush = performance.now();
function delay(amount) {
  var start = performance.now();
  var now = performance.now();;
  while (now - start < amount) {
    now = performance.now();
  }
  return 'delayed!';
}
function test() {
  requestAnimationFrame(function() {
    var now = performance.now();
    console.log('frame', now - window.lastFlush);
    window.lastFlush = now;
    delay(15.5);
    if (!window.stopTest) { test(); }
  });
}

test();
setTimeout(function() { window.stopTest = true; }, 5000);