v145 · Performance

LoAF Presentation Inspector

Long Animation Frame (LoAF) entries now carry presentationTime in Chrome 145. Each janky frame tells you not just when JS ran, but exactly when the resulting pixels reached the screen. This demo deliberately creates long frames and shows the full phase breakdown: script → render → paint → present.

Feature detection: checking…

Stress controls — trigger long frames

Loop interval: every 800 ms Burst: 60 ms

Statistics

Total LoAF frames
0
Avg LoAF duration
—
Avg compositor lag
—
Max presentation lag
—

Long Animation Frames

Script
Render
Paint
Compositor
# Duration renderStart paintTime presentationTime Compositor lag Phase breakdown
No LoAF entries yet — trigger a burst above
 
// LoAF entries now carry presentationTime in Chrome 145
const obs = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (entry.entryType !== 'long-animation-frame') continue;

    const compositorLag = entry.presentationTime - (entry.renderStart + entry.styleAndLayoutDuration);
    const paintLag      = entry.paintTime ? entry.paintTime - entry.renderStart : null;

    console.log({
      duration:         entry.duration,        // total frame time ≥ 50 ms
      renderStart:      entry.renderStart,      // layout/paint start
      paintTime:        entry.paintTime,        // CPU rasterisation done (Chrome 145+)
      presentationTime: entry.presentationTime, // frame on screen (Chrome 145+)
      compositorLag,                            // how long compositor held the frame
    });
  }
});

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

see also