IT-lexikon › Web › Virtuell DOM-diffing

Virtuell DOM-diffing

Web In English → Uppdaterad: 2026-05-30

Tekniken (populariserad av React) där UI:t beskrivs som ett lättviktigt "virtuellt" DOM-träd i minnet; vid en ändring byggs ett nytt träd och jämförs (diffas) mot det gamla, så att bara de faktiska skillnaderna appliceras på den riktiga (dyra) DOM:en. Kallas även reconciliation.

Varför: att röra den riktiga DOM:en är dyrt, och att manuellt hålla reda på exakt vad som ska uppdateras är felbenäget. React:s lösning: rendera om komponenten till ett nytt virtuellt träd vid varje ändring, jämför med föregående, och beräkna den minimala uppsättningen riktiga DOM-operationer. "Nycklar" (key) hjälper diff-algoritmen matcha element i listor effektivt. Avvägning: diffningen är arbete i sig — för stora/ofta uppdaterade träd kan den bli en flaskhals (React Fiber införde tidsdelning för att inte blockera huvudtråden). Det moderna motargumentet: signals och kompilatorbaserade ramverk (Svelte) hoppar över den virtuella DOM:en helt och uppdaterar exakt det som ändrats direkt → ofta snabbare. Diffning vs signals är en central frontend-debatt. En definierande teknik i 2010-talets ramverk. Hör ihop med signals och hydration.

← Tillbaka till lexikonet