requestAnimationFrame が呼び出される間隔を測定する

目安

• 30FPS: 33.3ms
• 60FPS: 16.7ms

結果

コード

var t = previousTime = performance.now();
var cnt = 0;
var MAX_COUNT = 100;
var reqId;
var resElm = document.querySelector('#res');

var tick = function() {

    if (cnt >= MAX_COUNT) {
        window.cancelAnimationFrame(reqId);
        return;
    }

    t = performance.now();
    var elapsed = t - previousTime;
    var liElm = document.createElement('li');
    liElm.textContent = (cnt+1) + ': ' + elapsed.toFixed(2) + 'ms';
    resElm.appendChild(liElm);

    previousTime = t;
    reqId = requestAnimationFrame(tick);
    cnt++;
};
reqId = requestAnimationFrame(tick);