Shadow DOM, Virtual DOM жана кадимки DOM ортосунда кандай айырма бар?

DOM (Document Object Model) — бул HTML жана XML документтери үчүн API. Бул дарак түрүндөгү түйүндөрдүн структурасы, анда ар бир түйүн документтин элементине, атрибутуна же тексттик бөлүгүнө туура келет. Бул веб-баракчалардын түзүмүн, стилдерин жана мазмунун алуу жана башкаруу үчүн колдонулат. DOM менен түздөн-түз иштөө ылдам эмес болушу мүмкүн, анткени стилдерди, макетти кайра эсептөө жана кайра чийүү керек болот.

Virtual DOM — React же Vue сыяктуу фреймворктордо колдонулган концепция. Бул DOM дарагынын эсинде сакталган көрүнүшү. Көчүрмө компоненттин маалыматтары өзгөргөндө, фреймворк жаңы виртуалдуу DOM дарагын түзөт. Андан соң ал мурунку виртуалдуу дарак менен салыштырылат (диффинг) жана реалдуу DOMга колдонулушу керек минималдуу өзгөртүүлөр тандалат. Бул баракчаны жаңылоону оптималдаштыруу үчүн, реалдуу DOM менен татаал операцияларды азайтуу мүмкүнчүлүгүн берет.

Shadow DOM — бул веб-стандарт, ал компоненттин түзүмүн, стилдерин жана жүрүм-турумун инкапсуляциялоого мүмкүндүк берет. Ал жашырын "көңүл" дарагын түзөт, ал хост-элементке кошулат. Shadow DOM мазмуну башка документтен изоляцияланган: анын ичинде стилдер сыртка таасир этпейт жана тескерисинче. Бул кайра колдонулучу, изоляцияланган компоненттерди түзүү үчүн пайдалуу, мисалы, <video> же <input type="range">.

Негизги айырмачылыктар:

Өзгөчөлүк	Адистик DOM	Virtual DOM	Shadow DOM
Көрсөтүлүшү	Реалдуу документ дарагы API	Эсинде сакталган DOMдин жеңил көрүнүшү	Инкапсуляцияланган DOM дарагы
Максаты	Документке кирүү жана өзгөртүү	DOM жаңылоолорун оптималдаштыруу	Компоненттерди инкапсуляциялоо
Манипуляциялар	Түздөн-түз	Аралык (версияларды салыштыруу аркылуу)	Түздөн-түз, бирок "көңүл" ичинде гана
Стильдердин изоляциясы	Жок	Жок (эгер CSS-in-JS же модулдарды колдонбосо)	Бар
Стандарт	Веб-платформанын бөлүгү	Фреймворктордун концепциясы	Веб-платформанын бөлүгү