Kuo skiriasi shadow DOM, virtual DOM ir įprastas DOM?

Shadow DOM:

• izoliacija: Sukuria atskirą, izoliuotą DOM medį pagrindinio dokumento viduje. Shadow DOM stiliai ir skriptai pagal numatytuosius nustatymus neveikia pagrindinio dokumento ir atvirkščiai.
• scoping: Idealiai tinka kurti pakartotinai naudojamus, nepriklausomus komponentus (pvz., žiniatinklio komponentus).
• rendering: Naršyklė tiesiogiai atvaizduoja Shadow DOM.

Virtual DOM:

• abstrakcija: Atstovauja DOM kaip JavaScript objektus atmintyje.
• diffing ir patching: Naudoja jas karkasai (pvz., React) DOM atnaujinimų optimizavimui. Kai keičiasi būsena, karkasas sukuria naują Virtual DOM versiją, lygina ją su ankstesne (diffing) ir taiko tik būtinus pakeitimus realiame DOM (patching).
• našumas: Pagerina našumą dažnų DOM atnaujinimų metu, sumažindamas tiesioginį sąlytį su naršyklės API.
• nėra naršyklės funkcija: Tai yra koncepcija, įgyvendinta JavaScript lygyje, o ne natūrali naršyklės galimybė.

Įprastas DOM (Document Object Model):

• reprezentacija: Atstovauja mazgų medį (elementus, atributus, tekstą), atitinkantį HTML dokumento struktūrą.
• API: Teikia API prieigai ir manipuliacijai dokumento struktūrai ir turiniui.
• rendering: Naršyklė atvaizduoja tikrąjį DOM.
• tiesioginė manipuliacija: Pakeitimai atliekami tiesiogiai tikrame DOM, kas gali būti lėta didelių atnaujinimų metu.

Santrauka:

Savybė	Shadow DOM	Virtual DOM	Įprastas DOM
Paskirtis	Komponentų inkapsuliacija	DOM atnaujinimų optimizavimas	HTML struktūros atvaizdavimas
Prigimtis	Natyvi naršyklės galimybė	Koncepcija, įgyvendinta JS	Natyvi naršyklės struktūra
Izoliacija	Taip, DOM ir CSS lygyje	Ne, tai yra vaizdas	Ne
Sąveika	Tiesioginė naršyklės sąveika	Pirmiausia diffing/patching, tada DOM	Tiesioginė sąveika
Naudojimas	Žiniatinklio komponentai	Rėmai (React, Vue ir kt.)	Pagrindinis web API