Shadow DOM, Virtual DOM və adi DOM arasındakı fərq nədir?

DOM (Sənəd Obrazı Modeli) HTML və XML sənədləri üçün API-dir. Bu, sənədin elementinə, atributuna və ya mətn fraqmentinə uyğun gələn düyünlər ağacını təmsil edir. Veb səhifələrin quruluşuna, üslublarına və məzmununa giriş və manipulyasiya üçün istifadə olunur. Birbaşa DOM manipulyasiyaları, üslubların, düzənin və yenidən çəkilmənin hesablanması lazım olduğu üçün yavaş ola bilər.

Virtual DOM, React və ya Vue kimi çərçivələrdə istifadə olunan bir anlayışdır. Bu, yaddaşda saxlanılan DOM ağacının yüngül bir nümayişidir. Komponent məlumatları dəyişdikdə, çərçivə yeni virtual DOM ağacı yaradır. Sonra onu əvvəlki virtual ağacla müqayisə edir (diffing) və real DOM-ə tətbiq olunmalı olan minimal dəyişiklikləri müəyyən edir. Bu, səhifənin yenilənməsini optimallaşdırmağa və bahalı əməliyyatları minimuma endirməyə imkan verir.

Shadow DOM, veb standartıdır və komponentin quruluşunu, üslublarını və davranışını inkapsulyasiya etməyə imkan verir. Bu, gizli "kölgə" DOM ağacı yaradır və bu, adi DOM-də (ev sahibi element) bir elementə qoşulur. Shadow DOM-un məzmunu sənədin qalan hissəsindən izolyasiya olunub: onun içindəki üslublar xarici dünyaya təsir etmir və əksinə. Bu, təkrar istifadə edilə bilən və izolyasiya olunmuş komponentlər yaratmaq üçün faydalıdır, məsələn, <video> və ya <input type="range">.

Əsas fərqlər:

Xüsusiyyət	Adi DOM	Virtual DOM	Shadow DOM
Təqdimat	Əsl sənəd API ağacı	Yüngül DOM nümayişi	İzolyasiya olunmuş DOM alt ağacı
Məqsəd	API sənədə giriş və dəyişiklik	DOM yeniləmələrini optimallaşdırmaq	Komponentlərin inkapsulyasiyası
Manipulyasiya	Birbaşa	Dolayısı ilə (versiyaların müqayisəsi ilə)	Birbaşa, amma yalnız "kölgə" daxilində
Üslub izolyasiyası	Yox	Yox (CSS-in-JS və ya modullardan istifadə edilmədikdə)	Bəli
Standart	Veb platformasının bir hissəsi	Framework anlayışı	Veb platformasının bir hissəsi