v148 · Performance · LoAF

LoAF Classifier

Chrome 148 adds styleDuration to Long Animation Frame (LoAF) entries — the time spent in style recalculation and layout within a long frame. This classifier triggers different types of jank (script-heavy, style-heavy, layout-heavy) and labels each LoAF entry by its dominant component so you can identify the real bottleneck.

Trigger different jank types

Script-heavy

Synchronous JS computation (Fibonacci loop). High script duration, low style duration.

Style-heavy

Forced style recalculation: reading computed styles after DOM writes. High styleDuration.

Layout-heavy

Repeated offsetWidth reads after DOM changes — forces synchronous layout reflow.

LoAF entries (PerformanceObserver type: long-animation-frame)

type

duration

script

style

layout

breakdown

Trigger a jank type to capture LoAF entries.

LoAF entries with high styleDuration indicate expensive style recalculations. Typical causes: reading getComputedStyle() after DOM mutations (forces a style flush), complex CSS selectors on large DOM trees, or frequent class toggling on many elements.

// Chrome 148: LoAF with styleDuration
const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    // New in Chrome 148:
    console.log({
      duration:      entry.duration,        // total frame time
      scriptDuration: entry.scripts?.[0]?.duration,
      styleDuration: entry.styleDuration,  // time in style calc
      renderStart:   entry.renderStart,
      styleAndLayoutStart: entry.styleAndLayoutStart,
    });
  }
});
observer.observe({
  type: 'long-animation-frame',
  buffered: true,
});

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

see also

implementation reference