Shadow DOM, virtual DOM və adi DOM arasındakı fərqlər nədir?

Shadow DOM:

• inkapsulasiya: Əsas sənəddə ayrıca və izolyasiya olunmuş DOM ağacı yaradır. Shadow DOM daxilindəki üslublar və skriptlər standart olaraq əsas sənədi təsir etmir və əksinə.
• scoping: Yenidən istifadə edilə bilən, müstəqil komponentlər yaratmaq üçün idealdır (məsələn, veb komponentlər).
• rendering: Brauzer Shadow DOM-u birbaşa render edir.

Virtual DOM:

• abstraksiya: Bu, yaddaşda JavaScript obyektləri şəklində DOM-un nümayişidir.
• diffing və patching: Çərçivələr (məsələn, React) tərəfindən yeniləmələri optimallaşdırmaq üçün istifadə olunur. Vəziyyət dəyişdikdə, çərçivə Virtual DOM-un yeni versiyasını yaradır, onu əvvəlki ilə müqayisə edir (diffing) və yalnız lazım olan dəyişiklikləri real DOM-a tətbiq edir (patching).
• performans: DOM-un tez-tez yenilənmələrində performansı artırır, brauzer API ilə birbaşa qarşılıqlı əlaqəni minimuma endirir.
• brauzer funksiyası deyil: Bu, JavaScript səviyyəsində həyata keçirilmiş bir anlayışdır və brauzerin yerli funksiyası deyil.

Adi DOM (Document Object Model):

• nümayiş: HTML sənədinin quruluşuna uyğun olaraq elementlər, atributlar və mətnlərdən ibarət bir ağacı təmsil edir.
• API: Sənədin quruluşuna və məzmununa giriş və manipulyasiya üçün API təmin edir.
• rendering: Brauzer real DOM-u render edir.
• birbaşa manipulyasiya: Dəyişikliklər birbaşa real DOM-da edilir, bu isə çox sayda yeniləmədə yavaş ola bilər.

Xülasə cədvəli:

Xüsusiyyət	Shadow DOM	Virtual DOM	Adi DOM
Məqsəd	Komponentlərin inkapsulyasiyası	DOM yeniləmələrini optimallaşdırmaq	HTML strukturunun nümayişi
Təbii	Brauzerin yerli funksiyası	JS-də həyata keçirilmiş konsept	Brauzerin yerli strukturu
İzolyasiya	Bəli, DOM və CSS səviyyəsində	Xeyr, yalnız bir nümayişdir	Xeyr
Əlaqə	Brauzer ilə birbaşa əlaqə	Əvvəl diffing/patching, sonra DOM	Birbaşa brauzer əlaqəsi
İstifadə	Veb komponentlər	Çərçivələr (React, Vue və s.)	Əsas veb API