Ejemplo 03: Configurar PerformanceObserver básico

PerformanceObserver: La base de LoAF API

Para usar Long Animation Frames API, necesitamos configurar un PerformanceObserver. Este patrón es común en todas las Performance APIs del navegador.

En este ejemplo veremos la configuración más básica posible: crear un observer y hacer console.log() de los entries detectados.

Demo interactiva

💡 Instrucción:

Abre las DevTools (F12) y ve a la pestaña Console. Ahí verás los objetos LoAF completos.

Código del observer:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Frame lento detectado:', entry);
  }
});

observer.observe({
  type: 'long-animation-frame',
  buffered: true
});

✅ Observer configurado

Los LoAF entries se están mostrando en la consola del navegador.

Haz clic en el botón para generar un frame lento y ver el output.

Anatomía del código

1. Crear el observer

const observer = new PerformanceObserver((list) => {
  // Callback que se ejecuta cuando se detectan entries
});

PerformanceObserver recibe una función callback que se ejecutará cada vez que se detecten nuevas performance entries del tipo que especifiquemos.

2. Iterar sobre las entries

for (const entry of list.getEntries()) {
  console.log('Frame lento detectado:', entry);
}

list.getEntries() devuelve un array con todas las entries detectadas. Normalmente habrá una, pero pueden ser varias si ocurren múltiples frames lentos en rápida sucesión.

3. Configurar el observer

observer.observe({
  type: 'long-animation-frame',
  buffered: true
});

type: Especifica qué tipo de entries observar. En nuestro caso, 'long-animation-frame'
buffered: true: Incluye entries que ocurrieron antes de crear el observer. Útil para capturar frames lentos durante la carga inicial.

⚠️ Importante:

El observer debe crearse lo antes posible en el ciclo de vida de la página para capturar todos los frames lentos, especialmente los de la carga inicial.

Otros tipos de entries

PerformanceObserver puede observar muchos tipos de métricas:

Tipo	Descripción
`long-animation-frame`	Frames que tardan >50ms
`longtask`	Tareas que tardan >50ms (menos detalle que LoAF)
`event`	Interacciones del usuario (click, keyboard, etc.)
`largest-contentful-paint`	LCP (Core Web Vital)
`layout-shift`	CLS (Cumulative Layout Shift)
`navigation`	Métricas de navegación (DOMContentLoaded, load, etc.)
`resource`	Carga de recursos (JS, CSS, imágenes, etc.)

Verificar soporte

// Verificar si LoAF está disponible
if ('PerformanceLongAnimationFrameTiming' in window) {
  console.log('✅ LoAF API disponible');
} else {
  console.warn('❌ LoAF API no disponible');
}

// Verificar qué entry types están soportados
const supportedTypes = PerformanceObserver.supportedEntryTypes;
console.log('Entry types soportados:', supportedTypes);

if (supportedTypes.includes('long-animation-frame')) {
  // Configurar observer
}