Mis vahe on Shadow DOM, Virtual DOM ja tavalise DOM vahel?

DOM (Document Object Model) — see on API HTML- ja XML-dokumentide jaoks. See on puu struktuur, kus iga sõlm vastab dokumendi elemendile, atribuudile või tekstilõigule. Seda kasutatakse struktuuri, stiilide ja sisu juurdepääsuks ja manipuleerimiseks. Otse DOM-i manipuleerimine võib olla aeglane, kuna vaja on stiilide, paigutuse ja uuesti joonistamise arvutamist.

Virtual DOM — see on kontseptsioon, mida kasutatakse React või Vue raamistikus. See on DOM puu kujutis, mis hoitakse mälus. Kui komponendi andmed muutuvad, loob raamistik uus virtuaalse DOM-puu. Seejärel võrreldakse seda eelneva virtuaalse puuga (diffing) ja määratakse minimaalne muudatuste kogum, mida tuleb rakendada reaalset DOM-i. See võimaldab optimeerida lehe uuendamist, minimeerides kulukaid operatsioone reaalsete DOM-idega.

Shadow DOM — see on veebistandard, mis võimaldab inkapsuleerida komponendi struktuuri, stiile ja käitumist. See loob varjatud "varju"-puu DOM-is, mis on ühendatud elemendiga tavalises DOM-is (hosti-element). Shadow DOM-i sisu on isoleeritud ülejäänud dokumendist: selle stiilid ei mõjuta välismaailma ja vastupidi. See on kasulik korduvkasutatavate isoleeritud komponentide loomisel, näiteks <video> või <input type="range">.

Peamised erinevused:

Omadus	Tavaline DOM	Virtual DOM	Shadow DOM
Kuvand	Reaalne dokumendi puu API	Kerge DOM-i kujutis mälus	Inkapsuleeritud DOM-puu
Eesmärk	API juurdepääs ja muutmine dokumentis	DOM-i uuenduste optimeerimine	Komponentide inkapsuleerimine
Manipulatsioonid	Otse	Kaudne (versioonide võrdlemise kaudu)	Otse, kuid ainult "varjus"
Stiilide isolatsioon	Ei ole	Ei ole (kui ei kasutata CSS-in-JS või mooduleid)	On
Standard	Veebiplatvormi osa	Raamistikukontseptsioon	Veebiplatvormi osa