v148 · origin trial · performance

Long Animation Frames style duration

Adds styleDuration and forcedStyleDuration to the Long Animation Frame API so performance-conscious developers can finally tell their style time apart from their layout time.

Heads up Origin trial in Chrome 148. The fields below are the new additions to PerformanceLongAnimationFrameTiming; the rest of the LoAF entry shape is unchanged.

concepts

  1. Style Cost Meter

    Trigger style invalidations on a big DOM and watch a live LoAF observer report styleDuration separately from renderDuration. See which CSS edits cause the biggest style cost.

  2. Forced Style Flush

    The other half of the timing story: forcedStyleDuration. Trigger handlers that read layout-affecting values mid-tick and watch the LoAF entry break out the forced subset of style recalc from the natural one.

  3. Animation Profiler

    Profile styleDuration across different animation techniques — CSS animations, JS style changes, and forced reflows. Run each scenario and compare how much frame time each spends in style recalculation vs. script vs. render, with a live bar chart.

  4. Forced Reflow Detector

    A diagnostic tool that identifies forced synchronous layouts by running 10 common reflow-triggering reads (offsetHeight, getBoundingClientRect, etc.) and measuring styleAndLayoutDuration from LoAF entries. A before/after panel shows how batching with requestAnimationFrame eliminates the cost.

  5. LoAF Classifier

    Three trigger buttons generate script-heavy, style-heavy, or layout-heavy long animation frames. A real PerformanceLongAnimationFrameTiming observer captures entries and classifies each by its dominant cost using styleDuration, blockingDuration, and script timing breakdown. A stacked bar chart shows the proportion of script / style / layout / other for every captured frame.

why it exists

Until now LoAF entries surfaced a combined renderDuration that mixed style recalculation, layout, paint, and compositing into one number. If your frame is too long, you couldn't tell from the entry whether the culprit was a deep selector recalc or a layout thrash. With styleDuration broken out, your perf overlay (or RUM service) can point straight at the right kind of fix.

references

implementation reference

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