Mi a különbség a Shadow DOM, Virtual DOM és a normál DOM között?

A DOM (Document Object Model) egy API HTML és XML dokumentumokhoz. Egy csomópontfát ábrázol, ahol minden csomópont megfelel egy elemnek, attribútumnak vagy a dokumentum szövegrészének. Az oldal szerkezetéhez, stílusához és tartalmához való hozzáférésre és manipulációra használják. A DOM közvetlen manipulációja lassú lehet, mivel stílusok, elrendezés és újrarajzolás számítását igényli.

A Virtual DOM egy olyan fogalom, amit olyan keretrendszerekben használnak, mint a React vagy Vue. Ez a DOM fa memóriában tárolt könnyű másolata. Amikor a komponens adatai megváltoznak, a keretrendszer létrehoz egy új virtuális DOM-fát. Ezután összehasonlítja az előző virtuális fával (diffing), és meghatározza a minimális változtatásokat, amiket a valódi DOM-ra kell alkalmazni. Ez optimalizálja az oldal frissítését, minimalizálva a drága DOM műveleteket.

A Shadow DOM egy webes szabvány, amely lehetővé teszi egy komponens szerkezetének, stílusainak és viselkedésének inkapszulálását. Egy rejtett "árnyék" DOM-fát hoz létre, amely egy elemhez csatlakozik a normál DOM-ban (házigazda elem). A Shadow DOM tartalma elszigetelt a dokumentum többi részétől: a benne lévő stílusok nem befolyásolják a külső világot, és fordítva. Ez hasznos újrahasznosítható, elszigetelt komponensek létrehozásához, például <video> vagy <input type="range">.

Fő különbségek:

Jellemző	Szokásos DOM	Virtual DOM	Shadow DOM
Ábrázolás	Valós dokumentumfa API	Könnyű DOM reprezentáció a memóriában	Inkapszulált DOM al-fa
Cél	API a dokumentumhoz való hozzáféréshez és módosításhoz	DOM frissítések optimalizálása	Komponensek inkapszulálása
Manipulációk	Közvetlen	Közvetett (verziók összehasonlításával)	Közvetlen, de csak "árnyék"-ban
Stílus elszigetelése	Nem	Nem (CSS-in-JS vagy modulok használata nélkül)	Igen
Szabvány	A web platform része	Framework fogalom	A web platform része