Long Animation Frames style duration

at a glance

why it exists

The Long Animation Frames API (LoAF) reports every frame that takes more than 50 ms to render. Before this addition, the PerformanceLongAnimationFrameTiming entry exposed total frame duration (duration) and script execution time (blockingDuration), but lumped style recalculation and layout into the general duration bucket. In pages that trigger forced layouts (style reads after DOM writes), style and layout often dominate the slow frame — but developers had no way to confirm this from the LoAF entry alone.

Adding styleDuration (total time for style + layout) and forcedStyleDuration (time for forced style + layout triggered mid-frame) makes it possible to diagnose layout-thrashing patterns directly from the performance timeline.

shape of the API

Two new properties on PerformanceLongAnimationFrameTiming:

All other existing LoAF properties (duration, blockingDuration, renderStart, scripts, etc.) remain unchanged.

example

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType !== 'long-animation-frame') continue;

    console.log(`LoAF: ${entry.duration.toFixed(1)} ms total`);
    console.log(`  style+layout:        ${entry.styleDuration.toFixed(1)} ms`);
    console.log(`  forced style+layout: ${entry.forcedStyleDuration.toFixed(1)} ms`);

    // Threshold: warn if >50% of the frame is forced layout
    const forcedRatio = entry.forcedStyleDuration / entry.duration;
    if (forcedRatio > 0.5) {
      console.warn('Layout thrashing detected in this frame');
    }
  }
});

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

browser support

see also

• Chrome Platform Status — Long Animation Frames style duration
• W3C spec PR #30 — styleDuration addition
• Long Animation Frames API (Chrome Developers)