Estadísticas de fotogramas y problemas de desplazamiento

Un tirón al desplazarse es de las quejas más difíciles de convertir en un dato, porque desaparece en cuanto se intenta medir: grabar un perfil añade sobrecarga, el gesto no se reproduce igual dos veces, y el problema depende del hardware. Dos superposiciones del panel de renderizado atacan justamente ese caso: una da la cadencia real de fotogramas en directo, y otra marca las zonas de la página que impiden que el desplazamiento lo maneje el compositor.

Las estadísticas de fotogramas

La casilla correspondiente del panel de renderizado superpone un pequeño panel en la esquina de la página con tres bloques.

La cadencia de fotogramas instantánea, con su valor actual, su mínimo y su máximo recientes, más un pequeño gráfico. Es la medida directa de fluidez.

El estado de la rasterización acelerada, que dice si la GPU está participando en el dibujo o si el navegador está cayendo a rasterización por software. Este dato salva investigaciones enteras: si la aceleración está desactivada, ninguna optimización de capas va a servir de nada y la causa está en el sistema, en el controlador o en un indicador de línea de comandos.

La memoria de GPU en uso, que es la comprobación empírica de lo que la lección anterior estimaba a mano. Si esa cifra crece sin parar mientras usas la página, hay capas que se crean y no se destruyen.

Regiones que estorban al desplazamiento

La otra casilla resalta las áreas de la página donde el desplazamiento no puede resolverse solo en el compositor. El navegador tiene que consultar al hilo principal antes de desplazar esas zonas, y si el hilo está ocupado, el desplazamiento espera. Es exactamente el mecanismo que produce la sensación de que la página “se pega”.

Lo que se marca son dos cosas.

Regiones con manejadores de rueda o de toque no pasivos. Cuando un elemento tiene un escucha de estos eventos sin declararse pasivo, el navegador no puede saber si ese manejador va a cancelar el gesto, así que tiene que ejecutarlo antes de desplazar. Esa consulta convierte cada movimiento del dedo en una espera al hilo principal. La solución es declarar el escucha como pasivo, que es una promesa de que no se va a cancelar el evento.

// Un escucha pasivo permite que el desplazamiento no espere al hilo principal
const contenedor = document.querySelector('main') || document.body;

// Mal: el navegador tiene que preguntar antes de desplazar
contenedor.addEventListener('touchstart', alTocar);

// Bien: promete que no se va a cancelar, el compositor sigue por su cuenta
contenedor.addEventListener('touchstart', alTocar, { passive: true });
contenedor.addEventListener('wheel', alGirar, { passive: true });

function alTocar(e) { /* no llama a preventDefault */ }
function alGirar(e) { /* no llama a preventDefault */ }

// Auditoria rapida: encuentra escuchas no pasivos en los eventos criticos
(() => {
  const criticos = ['touchstart', 'touchmove', 'wheel', 'mousewheel'];
  const original = EventTarget.prototype.addEventListener;
  const sospechosos = [];
  EventTarget.prototype.addEventListener = function (tipo, fn, opciones) {
    if (criticos.includes(tipo)) {
      const pasivo = opciones && typeof opciones === 'object' ? opciones.passive : undefined;
      if (pasivo !== true) {
        sospechosos.push({ tipo, destino: this?.tagName || String(this), pila: new Error().stack.split('\n')[2]?.trim() });
      }
    }
    return original.call(this, tipo, fn, opciones);
  };
  window.escuchasNoPasivos = () => { console.table(sospechosos); return sospechosos; };
  console.log('Interceptando registros. Recarga o navega y ejecuta escuchasNoPasivos()');
})();

Regiones que no pueden componerse de forma independiente. Fondos fijos, ciertos efectos, contenedores anidados con desplazamiento propio en situaciones que el compositor no sabe resolver por su cuenta.

Distinguir los dos tipos de tirón

Un tirón al desplazarse tiene dos orígenes muy distintos, y el diagnóstico se hace en menos de un minuto con una sola comprobación.

Prueba: bloquea el hilo principal a propósito y desplázate.

// Bloquea el hilo principal durante tres segundos.
// Si durante ese tiempo la pagina se desplaza, el desplazamiento
// lo lleva el compositor y el problema esta en otro sitio.
setTimeout(() => {
  const t = performance.now();
  console.log('Bloqueando el hilo principal. Intenta desplazarte ahora.');
  while (performance.now() - t < 3000) {}
  console.log('Desbloqueado.');
}, 1500);

Si durante el bloqueo la página se desplaza normalmente, el desplazamiento lo maneja el compositor y el tirón que investigas no viene del hilo principal: viene del propio compositor, de demasiadas capas, de superficies enormes o de rasterización lenta. La investigación sigue con los bordes de capa y la memoria de GPU.

Si durante el bloqueo la página no se desplaza en absoluto, el desplazamiento depende del hilo principal, y ahí está el problema: hay manejadores no pasivos o efectos calculados en JavaScript. La investigación sigue con el overlay de regiones problemáticas y la auditoría de escuchas.

Esa bifurcación divide el espacio de causas en dos mitades sin herramientas en común, y cuesta cinco segundos.

Medir la fluidez sin el overlay

En un dispositivo remoto o cuando hace falta un número que registrar, este medidor da la distribución de duraciones de fotograma, que es más informativa que una media.

// Distribucion de duraciones de fotograma durante una interaccion
function medirFluidez(segundos = 5) {
  return new Promise(resolver => {
    const duraciones = [];
    let anterior = performance.now();
    const inicio = anterior;
    const paso = ahora => {
      duraciones.push(ahora - anterior);
      anterior = ahora;
      if (ahora - inicio < segundos * 1000) requestAnimationFrame(paso);
      else {
        const ordenadas = duraciones.slice().sort((a, b) => a - b);
        const p = q => ordenadas[Math.floor(ordenadas.length * q)] || 0;
        const largos = duraciones.filter(d => d > 32).length;
        console.table([{
          fotogramas: duraciones.length,
          medianaMs: +p(0.5).toFixed(1),
          p95Ms: +p(0.95).toFixed(1),
          peorMs: +ordenadas.at(-1).toFixed(1),
          fotogramasLargos: largos,
          porcentajeLargos: +(100 * largos / duraciones.length).toFixed(1)
        }]);
        resolver(duraciones);
      }
    };
    console.log('Desplazate o interactua durante', segundos, 'segundos.');
    requestAnimationFrame(paso);
  });
}

await medirFluidez(5);

El percentil noventa y cinco y el porcentaje de fotogramas largos son las dos cifras que se corresponden con la percepción. Una mediana de dieciséis milisegundos con un percentil noventa y cinco de ciento veinte describe una experiencia mala que una media aritmética disimularía por completo.