Long Tasks og LoAF — Hvad blokerer main thread

Main thread er single-threaded. Når JavaScript kører, venter alt andet — brugerinput, scroll, animationer. Tasks der tager over 50ms kategoriseres som Long Tasks og er den primære årsag til dårlig INP. Long Animation Frames (LoAF) er den nyere, mere præcise diagnose-standard der måler hele render-frames frem for kun JavaScript-eksekvering. At identificere og eliminere Long Tasks er den mest direkte vej til at forbedre INP og Total Blocking Time.

Long Tasks API

Long Tasks API rapporterer eksekvering over 50ms:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.warn(`Long Task: ${Math.round(entry.duration)}ms`);
    console.log('Attribution:', entry.attribution);
  }
});

observer.observe({ type: 'longtask', buffered: true });

entry.attribution angiver hvilken frame og script der forårsagede tasken — nyttigt til at identificere tredjeparts-scripts som synderen.

Long Animation Frames (LoAF)

LoAF er Chromiums nyere API der erstatter Long Tasks som primær INP-diagnostik. Det måler frames over 50ms og inkluderer:

• JavaScript-eksekvering
• Style-beregning og layout
• Paint og compositing
• Script-attribuering per frame

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Scripts der bidrog til denne frame
    for (const script of entry.scripts) {
      console.log(`Script: ${script.sourceURL}`);
      console.log(`Invoker: ${script.invokerType}`);  // 'event-listener', 'promise-resolve', etc.
      console.log(`Duration: ${script.duration}ms`);
    }
  }
});

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

LoAF er tilgængeligt i Chrome 123+ og er det tool Google Chrome DevTools bruger internt til INP-attribuering.

Hvad skaber Long Tasks

Monolitisk JavaScript: Et 2 MB bundle der eksekveres i én opgave ved sideload. Løsning: code splitting og lazy loading.

Synchronous layout thrashing: JavaScript der alternerer mellem at læse og skrive DOM-properties tvinger browseren til at genberegne layout synkront i en loop:

// BAD — forced synchronous layout per iteration
elements.forEach(el => {
  const height = el.offsetHeight;  // Trigger layout
  el.style.height = (height * 2) + 'px';  // Invalidate layout
});

// GOOD — batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight);  // Alle reads
elements.forEach((el, i) => {
  el.style.height = (heights[i] * 2) + 'px';  // Alle writes
});

Tredjeparts-scripts: Analytics, A/B-test og chatscripts der kører tunge initialiseringsrutiner ved load.

Event handlers der gør for meget: En scroll- eller input-handler der beregner komplekse ting synkront.

Strategier til at eliminere Long Tasks

Task yielding — del lange tasks op i mindre chunks via scheduler.yield() (eller setTimeout(fn, 0) som fallback):

async function processItems(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);

    // Yield til main thread hvert 50. element
    if (i % 50 === 0) {
      await scheduler.yield();  // Chrome 115+
      // Fallback: await new Promise(r => setTimeout(r, 0));
    }
  }
}

Web Workers — flyt tung beregning til worker thread helt.

requestIdleCallback — udskyd ikke-kritisk arbejde til browseren er idle:

requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    tasks.shift()();
  }
});

Måling i praksis

Chrome DevTools Performance-panel visualiserer Long Tasks som røde trekanter over task-blokke. Main track i timeline viser hvad der foregår — JavaScript-eksekvering, style-beregning, layout og paint.

Total Blocking Time (TBT) i Lighthouse aggregerer Long Task-tid — det er det lab-metric der bedst korrelerer med INP-field-data. → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.