Long Tasks

Long Tasks

Long Tasks and Long Animation Frames

A longtask entry reports a main-thread task over 50 ms but not its cause. Long Animation Frames (long-animation-frame entries) report frames delayed beyond 50 ms, with a scripts array naming the invoker, function and sourceURL. Both are Limited availability: Chromium 4,389 only, long tasks since Chrome 58 1 and LoAF since Chrome 123 (March 2024).

Finding the script behind a janky frameHTMLLive

<button id="sort">Sort 300,000 rows</button>
<script>
  new PerformanceObserver((list) => list.getEntries().forEach((frame) => {
    console.log(`frame ${Math.round(frame.duration)} ms, blocking ${frame.blockingDuration} ms`);
    for (const s of frame.scripts) console.log(`  ${s.invoker} -> ${s.sourceFunctionName}`);
  })).observe({ type: 'long-animation-frame', buffered: true });
  document.getElementById('sort').addEventListener('click', function sortRows() {
    Array.from({ length: 300_000 }, Math.random).sort((a, b) => a - b);
  });
</script>

frame 168 ms, blocking 117.3 ms
  BUTTON#sort.onclick -> sortRows

In production, beacon these entries to analytics and group them by sourceURL, then fix the worst scripts with a worker or by yielding (Prioritized Task Scheduling).

MENU