v147 · Performance APIs · Origin Trial

Long Animation Frames style duration

Chrome's LongAnimationFrameStyleDuration origin trial splits LoAF style and layout work into more actionable fields: styleDuration and layoutDuration on each PerformanceLongAnimationFrameTiming entry, plus forcedStyleDuration and forcedLayoutDuration on each PerformanceScriptTiming attribution record.

Origin-trial surface. Baseline Long Animation Frames still expose duration, styleAndLayoutStart, and scripts[].forcedStyleAndLayoutDuration. The split style/layout fields are only visible when the Chrome 147 origin trial or experimental web platform flag is active, so every demo below shows a fallback path when they are absent.

concepts

  1. LoAF Style Duration Monitor

    Run style, forced-style, and layout workloads and inspect the resulting LoAF entry or fallback measurement, with forced split fields read from entry.scripts[].

  2. Style vs Layout Analyzer

    Compare one style-heavy workload against one layout-heavy workload and see whether this browser exposes split fields or only the combined baseline timing window.

  3. rAF Budget Monitor

    Use intensity sliders to generate style, layout, or combined rAF pressure and track maximum LoAF/fallback timings over repeated runs.

  4. Style Recalc Profiler

    Run three style-recalculation scenarios and plot the captured split fields or fallback combined style/layout window on a live canvas chart.

  5. Compatibility Lab

    Probe the exact baseline and origin-trial fields, then run style/layout workloads that expose which fields this browser actually provides.

why it shipped

Long Animation Frame Timing exposes slow frames through PerformanceLongAnimationFrameTiming.duration, but the combined number does not explain whether CSS selector work, layout, or synchronous script-forced recalculation caused the delay. The origin-trial fields split those buckets so developers can choose the right fix: simplify CSS matching, batch reads and writes, reduce layout depth, or remove forced synchronous style/layout reads.

references