27

Hoy intenté este algoritmo para medir a cuantos cuadros por segundo (FPS) se refresca mi pantalla (yo sé de antemano que son 50 FPS).

function measureFpsAsync() {
    requestAnimationFrame(function(t0) {
        requestAnimationFrame(function(t1) {
            fps = Math.round(1000/(t1 - t0));
            alert(fps);
        });
    });
}
window.onload = measureFpsAsync;

Para mi sorpresa el resultado no fue 50, tampo un resultado estable, algunas veces resulta 25, otras 13, otras 7. Parece que se salta algunos "frames" (o cuadros) entre los callbacks.

Lo probé en Chrome, Firefox y Edge y siempre pasa lo mismo.

Luego intenté envolverlo en un setTimeout a ver que sucedía y funcionó, siempre me devuelve un resultado estable de 50 FPS.

setTimeout(function() { 
        measureFpsAsync();
}, 500);

La verdad me sorprende, yo entendía que requestAnimationFrame tenía cierta correlación con el refresco vertical de la pantalla y que se llama a intervalos regulares, ahora no se si este método es seguro para calcular el FPS.

¿Alguien me puede explicar por qué pasa esto?

Es importante para mi, porque estoy creando una coreografía y necesito calcular un epsilon muy preciso.

Es seguro este método o debería moverme a un enfoque que tome mas muestras?

http://jsfiddle.net/foqoh61o/1/

1
  • ¿Alguna respuesta te fue de utilidad?
    – fredyfx
    el 2 mar. 2018 a las 23:54

2 respuestas 2

14

El principal problema de la prueba que has realizado está en la propia prueba: Tan sólo haces la prueba de FPS en entre dos fotogramas consecutivos completamente aislados.

La frecuencia de actualización del navegador está obviamente capada por la frecuencia de actualización máxima que permita vsync o, como se muestra en la respuesta de @AngelAngel, por el valor establecido mediante startAnimating, pero se pueden dar casos en los que esta frecuencia sea menor por saturación del proceso de redibujado.

Esto es precisamente lo que ocurre en tu primera prueba: Estás realizando una medida de FPS entre dos fotogramas que muy probablemente estén separados por un redibujado del DOM, teniendo en cuenta que realizas la petición inmediatamente después de que window haya terminado de cargar. En el segundo caso, pasado medio segundo el proceso de dibujado está estable y por tanto ambos fotogramas llegarán con frecuencia máxima, puesto que no hay nada que hacer entre ellos.

6

Los FPS varian porque solo se solicita un marco cuando es necesario. por ejemplo si la imagen no cambia o es un fondo oscuro la tasa se puede reducir a una tasa más baja, ademas cuando se ejecuta en las pestañas de fondo tambien pude darse el caso para mejorar el rendimiento y la duración de la batería.

Puede mirar este caso como se "ajustan los frames" usando: startAnimating(5); jsfiddle

var stop = false;
var frameCount = 0;
var $results = $("#results");
var fps, fpsInterval, startTime, now, then, elapsed;

startAnimating(5);

function startAnimating(fps) {
    fpsInterval = 1000 / fps;
    then = Date.now();
    startTime = then;
    console.log(startTime);
    animate();
}


function animate() {

    // stop
    if (stop) {
        return;
    }

    // request another frame

    requestAnimationFrame(animate);

    // calc elapsed time since last loop

    now = Date.now();
    elapsed = now - then;

    // if enough time has elapsed, draw the next frame

    if (elapsed > fpsInterval) {

        // Get ready for next frame by setting then=now, but...
        // Also, adjust for fpsInterval not being multiple of 16.67
        then = now - (elapsed % fpsInterval);

        // draw stuff here


        // TESTING...Report #seconds since start and achieved fps.
        var sinceStart = now - startTime;
        var currentFps = Math.round(1000 / (sinceStart / ++frameCount) * 100) / 100;
        $results.text("Elapsed time= " + Math.round(sinceStart / 1000 * 100) / 100 + " secs @ " + currentFps + " fps.");

    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Throttling requestAnimationFrame to a FPS</h3>
<p>This test:  Results should be approximately 5 fps
<p id="results">Results:</p>
<canvas id="canvas" width=300 height=300></canvas>

1
  • 1
    "Los FPS varian porque solo se solicita un marco cuando es necesario" esto solo es cierto si no se llama a requestAnimationFrame, en cuyo caso sí que se solicita un nuevo fotograma (lo estás haciendo tú). El problema del OP está en cómo realiza la prueba.
    – Darkhogg
    el 1 dic. 2015 a las 17:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.