Kāda ir atšķirība starp Shadow DOM, Virtual DOM un parasto DOM?

DOM (Document Object Model) — tas ir API priekš HTML un XML dokumentiem. Tā ir koka struktūra, kur katrs mezgls atbilst elementam, atribūtam vai teksta fragmentam dokumentā. To izmanto struktūras, stilu un satura pieejai un manipulācijai. Tiešas manipulācijas ar DOM var būt lēnas, jo nepieciešams pārskatīt stilus, izkārtojumu un pārkrāsošanu.

Virtual DOM — tas ir koncepts, ko izmanto React vai Vue frameworkos. Tas ir DOM koka attēlojums, kas tiek glabāts atmiņā. Kad komponenta dati mainās, framework izveido jaunu virtuālo DOM koku. Tad tas tiek salīdzināts ar iepriekšējo virtuālo koku (diffing) un tiek noteikts minimālais izmaiņu kopums, kas jāpiemēro reālajam DOM. Tas ļauj optimizēt lapas atjaunināšanu, samazinot dārgas operācijas ar reālo DOM.

Shadow DOM — tas ir web standarts, kas ļauj inkapsulēt komponenta struktūru, stilus un uzvedību. Tas izveido slēptu "ēnu" koku DOM, kas ir pieslēgts elementam parastajā DOM (host elementā). Shadow DOM saturs ir izolēts no pārējā dokumenta: tā stili neietekmē ārējo pasauli, un otrādi. Tas ir noderīgi atkārtoti izmantojamu izolētu komponentu izveidei, piemēram, <video> vai <input type="range">.

Galvenās atšķirības:

Raksturlielums	Parastais DOM	Virtual DOM	Shadow DOM
Attēlojums	Reāls dokumenta koka API	Viegls DOM attēlojums atmiņā	Inkapsulēts DOM koks
Mērķis	Pieejai un izmaiņām dokumentā	DOM atjauninājumu optimizācija	Komponentu inkapsulācija
Manipulācijas	Tiešas	Netiešas (caur versiju salīdzināšanu)	Tiešas, bet tikai "ēnas" iekšienē
Stilu izolācija	Nav	Nav (ja nē, CSS-in-JS vai moduļus)	Ir
Standarts	Web platformas daļa	Freamwork koncepcija	Web platformas daļa