Aprende cómo puedes determinar fácilmente la frecuencia de actualización de la pantalla con la ayuda de un pequeño truco en el navegador con JavaScript

Cómo determinar la frecuencia de actualización de la pantalla en Hz del monitor con JavaScript en el navegador

En los últimos días, para una de esas compras estúpidas que suelo hacer, compré un Benq Zowie 27 "XL2740 con una frecuencia de actualización de 240 Hz. Este tipo de monitor está hecho especialmente para juegos, ya que la frecuencia de actualización es bastante alta en comparación con una normal. monitor cuya frecuencia de actualización suele ser de 60 Hz. Personalmente, la profundidad del color es terrible, pero la suavidad es increíble, por lo que no fue una compra muy estúpida después de todo.

Entonces se me ocurrió la idea de cómo determinar este valor a partir de los monitores con algún lenguaje de programación. Comencé con JavaScript y en este artículo voy a compartir contigo lo que descubrí sobre este tema y cómo obtener la frecuencia de actualización del monitor con JavaScript en el navegador.

Nota importante

Todos los métodos basados ​​en el requestAnimationFrame que encontrarás en Internet te ayudarán a determinar los Hz del monitor primario en tu sistema (si tienes más de un monitor, podrás obtener solo el que está definido como principal en tu sistema), por ejemplo, considera mi configuración que tiene 3 monitores en el siguiente orden:

  1. Samsung U28E590 4K ([email protected])
  2. Benq Zowie 27" XL2740 ([email protected]) - Definido como pantalla principal
  3. Samsung C24F390 ([email protected])

Arrange displays Windows 10

Esto significa que si trato de obtener el valor de Hz con JavaScript lo podré hacer solo en la pantalla principal, no importa si mueves la ventana de Chrome a otro monitor, siempre obtendrás la velocidad de la pantalla principal (en mi caso el monitor 240hz).

Obtener la frecuencia de actualización de la pantalla

La primera propuesta para obtener la frecuencia de actualización de la pantalla es calcularla a través de los tiempos obtenidos en el método requestAnimationFrame del navegador. Este método le dice al navegador que le gustaría realizar una animación y, por lo tanto, le solicita al navegador que llame a una función específica para actualizar una animación antes del próximo repintado, esperando que se ejecute una única devolución de llamada antes del repintado.

El callback proporcionado como primer argumento del método requestAnimationFrame recibirá como primer argumento una variable de tipo DOMHighResTimeStamp (un valor doble utilizado para almacenar un valor de tiempo en milisegundos) similar al devuelto por performance.now(), que indica el momento en el que requestAnimationFrame comienza a ejecutar las funciones de devolución de llamada. El siguiente método getScreenRefreshRate te ayudará a obtener los Hz estimados de tu pantalla principal:

/**
 * Permite obtener los Hz estimados del monitor primario en el sistema.
 * 
 * @param {Function} callback La función se activa después de obtener los Hz estimados del monitor.
 * @param {Boolean} runIndefinitely Si se establece en verdadero, la devolución de llamada se activará indefinidamente (para el contador en vivo).
 */
function getScreenRefreshRate(callback, runIndefinitely){
    let requestId = null;
    let callbackTriggered = false;
    runIndefinitely = runIndefinitely || false;

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;
    }
    
    let DOMHighResTimeStampCollection = [];

    let triggerAnimation = function(DOMHighResTimeStamp){
        DOMHighResTimeStampCollection.unshift(DOMHighResTimeStamp);
        
        if (DOMHighResTimeStampCollection.length > 10) {
            let t0 = DOMHighResTimeStampCollection.pop();
            let fps = Math.floor(1000 * 10 / (DOMHighResTimeStamp - t0));

            if(!callbackTriggered){
                callback.call(undefined, fps, DOMHighResTimeStampCollection);
            }

            if(runIndefinitely){
                callbackTriggered = false;
            }else{
                callbackTriggered = true;
            }
        }
    
        requestId = window.requestAnimationFrame(triggerAnimation);
    };
    
    window.requestAnimationFrame(triggerAnimation);

    // Deténgase después de medio segundo si no debería ejecutarse indefinidamente
    if(!runIndefinitely){
        window.setTimeout(function(){
            window.cancelAnimationFrame(requestId);
            requestId = null;
        }, 500);
    }
}

Tiene 2 posibles formas de uso, la primera es obtener el valor una sola vez con el método que por sí mismo es asíncrono:

// Después de 500ms, se emitirán los Hz estimados del monitor (cuadros por segundo - FPS)
// 239 FPS (en mi caso)
getScreenRefreshRate(function(FPS){
    console.log(`${FPS} FPS`);
});

Alternativamente, si vas a crear un contador en vivo, ejecutar la devolución de llamada indefinidamente puede ser posible proporcionando el segundo argumento de la función como verdadero:

// Advertencia: el método se ejecutará para siempre, ideal para contadores en vivo
getScreenRefreshRate(function(FPS){
    console.log(`${FPS} FPS`);
}, true);
// Producirá para siempre algo como:
// 240 FPS
// 239 FPS
// 240 FPS
// 239 FPS
// 240 FPS
// 239 FPS
// 240 FPS

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores