Kuo skiriasi Shadow DOM, Virtual DOM ir įprastas DOM?

DOM (Document Object Model) — tai API HTML ir XML dokumentams. Tai yra medžio struktūra, kur kiekvienas mazgas atitinka elementą, atributą arba teksto fragmentą dokumente. Naudojamas prieigos ir manipuliavimo struktūra, stiliais ir turiniu būdu. Tiesioginės manipuliacijos DOM gali būti lėtos dėl stilių, maketo ir perbraižymo perskaičiavimo.

Virtual DOM — tai koncepcija, naudojama React ar Vue frameworkuose. Tai DOM medžio vaizdas, kuris saugomas atmintyje. Kai komponento duomenys keičiasi, frameworkas sukuria naują virtualų DOM medį. Tada jis lygina jį su ankstesniu virtualiu medžiu (diffing) ir nustato minimalų pakeitimų rinkinį, kurį reikia taikyti realiam DOM. Tai leidžia optimizuoti puslapio atnaujinimą, sumažinant brangias operacijas su realiu DOM.

Shadow DOM — tai web standartas, leidžiantis inkapsuliuoti komponento struktūrą, stilius ir elgseną. Sukuria paslėptą "tamsų" DOM medį, prijungtą prie elemento įprastame DOM (hosto elemente). Shadow DOM turinys yra izoliuotas nuo likusio dokumento: jo viduje esantys stiliai neveikia išorinio pasaulio, ir atvirkščiai. Tai naudinga kuriant pakartotinai naudojamus izoliuotus komponentus, pavyzdžiui, <video> arba <input type="range">.

Pagrindiniai skirtumai:

Savybė	Įprastas DOM	Virtual DOM	Shadow DOM
Vaizdas	Tikras dokumento medis API	Lengvas DOM vaizdas atmintyje	Inkapsuliuotas DOM medis
Paskirtis	API prieigai ir dokumento keitimui	DOM atnaujinimų optimizavimas	Komponentų inkapsuliacija
Manipuliacijos	Tiesioginės	Netiesioginės (per versijų palyginimą)	Tiesioginės, bet tik "tamsioje" dalyje
Stilių izoliacija	Nėra	Nėra (jei nenaudojama CSS-in-JS ar moduliai)	Yra
Standartas	Web platformos dalis	Framework koncepcija	Web platformos dalis