Mik a különbségek a shadow DOM, virtual DOM és a normál DOM között?

Shadow DOM:

• kapszulázás: Egy külön, elszigetelt DOM-fát hoz létre a fő dokumentumon belül. A Shadow DOMon belüli stílusok és szkriptek alapértelmezés szerint nem befolyásolják a fő dokumentumot és fordítva.
• scoping: Ideális újrahasznosítható, független komponensek (például webkomponensek) létrehozására.
• renderelés: A böngésző közvetlenül rendereli a Shadow DOM-ot.

Virtuális DOM:

• absztrakció: A DOM egy JavaScript objektumként való ábrázolása a memóriában.
• diffing és patching: Keretrendszerek (például React) használják az frissítések optimalizálására. Állapotváltozás esetén a keretrendszer új verziót készít a Virtuális DOM-ból, összehasonlítja az előzővel (diffing), és csak a szükséges változtatásokat alkalmazza a valódi DOM-ra (patching).
• teljesítmény: Gyorsítja a DOM gyakori frissítéseit, minimalizálva a közvetlen interakciót a böngésző API-jával.
• nem böngésző-specifikus funkció: Ez egy JavaScript szinten megvalósított fogalom, nem a böngésző natív képessége.

Hagyományos DOM (Document Object Model):

• reprezentáció: Egy fa szerkezetet (elemek, attribútumok, szöveg) ábrázol, amely megfelel a HTML-dokumentum szerkezetének.
• API: API-t biztosít a dokumentum szerkezetének és tartalmának eléréséhez és manipulálásához.
• renderelés: A böngésző a valódi DOM-ot rendereli.
• közvetlen manipuláció: A változtatások közvetlenül a valódi DOM-on történnek, ami sok frissítés esetén lassú lehet.

Összefoglaló táblázat:

Jellemző	Shadow DOM	Virtuális DOM	Hagyományos DOM
Cél	Komponens inkapszulációja	A DOM frissítések optimalizálása	HTML struktúra reprezentációja
Természet	A böngésző natív funkciója	JavaScriptben megvalósított fogalom	A böngésző natív szerkezete
Elszigeteltség	Igen, a DOM és CSS szinten	Nem, csak egy reprezentáció	Nem
Interakció	Közvetlen böngésző-interakció	Először diffing/patching, majd DOM	Közvetlen böngésző-interakció
Használat	Web komponensek	Frameworkök (React, Vue stb.)	Alapvető web API