Ejemplo 02: Capturar LoAF entry básico

La solución: Long Animation Frames API

En el ejemplo anterior vimos que Event Timing API nos dice cuándo algo va mal, pero no por qué.

Long Animation Frames API va más allá: nos muestra exactamente qué scripts se ejecutaron en cada frame lento, con información detallada de:

• Nombre de la función (sourceFunctionName)
• Archivo fuente (sourceURL)
• Qué disparó el script (invoker)
• Tiempo de ejecución (duration)
• Tiempo forzando layouts (forcedStyleAndLayoutDuration)

¿Qué estamos viendo ahora?

Información del Frame:

• duration: Tiempo total del frame (>50ms = frame lento)
• blockingDuration: Tiempo que bloquea la UI (duration - 50ms)
• renderStart: Cuándo comenzó la fase de render
• startTime: Cuándo comenzó el frame

Información de Scripts (¡esto es nuevo!):

• invoker: Qué disparó el script (ej: "BUTTON#slowButton.onclick")
• sourceFunctionName: Nombre de la función ejecutada
• sourceURL: Archivo donde está el código
• duration: Cuánto tiempo tomó este script específico
• forcedStyleAndLayoutDuration: Tiempo en recálculos forzados de layout

Código del ejemplo

// Long Animation Frames API
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Frame lento detectado!', entry);

    // Información del frame
    console.log('Duration:', entry.duration);
    console.log('Blocking duration:', entry.blockingDuration);

    // Scripts que se ejecutaron (¡información detallada!)
    entry.scripts.forEach(script => {
      console.log('Script:', script.sourceFunctionName);
      console.log('Invocado por:', script.invoker);
      console.log('URL:', script.sourceURL);
      console.log('Duración:', script.duration);
    });
  }
});

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

Comparación: Antes vs Ahora