Shadow DOM və Virtual DOM nədir?

codex

Modern veb inkişafında iki vacib anlayış tez-tez qarşımıza çıxır: Shadow DOM və Virtual DOM. Bunlar fərqli məqsədlərə xidmət etsələr də, hər ikisi istifadəçi interfeyslərinin effektiv və strukturlaşdırılmış şəkildə yaradılması üçün istifadə olunur. Bu məqalədə bu iki anlayışı sadə dillə izah edəcəyik və aralarındakı fərqləri göstərəcəyik.

DOM nədir? (Qısa xatırlatma)

DOM (Document Object Model) – HTML sənədinin JavaScript ilə idarə olunan obyekt formasında təqdim olunmasıdır. DOM vasitəsilə biz səhifədəki elementləri oxuya və dəyişə bilirik.

Məsələn:

document.querySelector("h1").textContent = "Salam, dünya!";

Bu əmrlə h1 başlığının məzmununu dəyişirik.

1. Shadow DOM nədir?

Shadow DOM – DOM-un xüsusi bir hissəsidir ki, digər DOM elementlərindən izolyasiya olunmuşdur. Başqa sözlə, bu DOM strukturunda olan stil və ya funksiyalar əsas DOM-a təsir etməz və əsas DOM da ona təsir edə bilməz.

Harada istifadə olunur?

Shadow DOM əsasən Web Components texnologiyasının bir hissəsidir. Məsələn, siz öz my-button komponentinizi yaradırsınız və istəmirsiniz ki, başqa CSS qaydaları bu komponentin içini pozsun. O zaman Shadow DOM köməyə gəlir.

Nümunə:

<my-button></my-button>

<script>
  class MyButton extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: "open" });
      shadow.innerHTML = `
        <style>
          button { background: red; color: white; }
        </style>
        <button>Click me</button>
      `;
    }
  }

  customElements.define("my-button", MyButton);
</script>

Üstünlükləri:

Stil və struktur tam izolyasiyalıdır.
Kapsullaşma (encapsulation) verir.
Yenidən istifadə edilə bilən komponentlər yaratmaq mümkün olur.

2. Virtual DOM nədir?

Virtual DOM – brauzerin real DOM-u ilə birbaşa işləmək əvəzinə, onun yaddaşda olan (virtual) surəti ilə işləmək metodudur. Bu texnika əsasən React, Vue kimi kitabxanalarda istifadə olunur.

Niyə lazımdır?

Real DOM ilə birbaşa işləmək çox yavaşdır, çünki hər dəyişiklik brauzerin render prosesini işə salır. Virtual DOM isə dəyişiklikləri əvvəlcə yaddaşda simulyasiya edir, sonra isə ən optimal formada real DOM-u yeniləyir.

Necə işləyir?

Komponentdə dəyişiklik olur.
Virtual DOM-da yeni vəziyyət yaranır.
Virtual DOM köhnə və yeni halı müqayisə edir (diffing).
Yalnız dəyişən hissələr real DOM-a tətbiq olunur (reconciliation).

Nümunə (React kontekstində):

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Sayaç: {count}</p>
      <button onClick={() => setCount(count + 1)}>Artır</button>
    </div>
  );
}

Bu halda React virtual DOM üzərində dəyişiklikləri hesablayır və yalnız p elementinin içini yeniləyir.

Shadow DOM vs Virtual DOM

Özəllik	Shadow DOM	Virtual DOM
Texnologiya	Web Components	React, Vue və b. UI kitabxanaları
Məqsəd	Stil və DOM kapsullaşması	Performansı artırmaq üçün DOM diffing
Brauzer dəstəyi	Native (birbaşa dəstəklənir)	Kitabxana səviyyəsində tətbiq olunur
Əlaqə	Real DOM-un bir hissəsidir	Real DOM-un surətidir (yaddaşda)
Qapsama	Bəli (izolyasiya olunmuşdur)	Xeyr (ümumi DOM strukturunu təqlid edir)

Hansı zaman hansından istifadə etməli?

Ssenari	Tövsiyə
Öz komponentinizi hazırlayırsınız və stil qarışıqlığının qarşısını almaq istəyirsiniz	Shadow DOM
İnteraktiv və tez dəyişən istifadəçi interfeysi qurursunuz	Virtual DOM (React, Vue və s.)
Bütün brauzerlərdə işləməli universal komponentlər istəyirsiniz	Shadow DOM-un dəstəyini yoxlayın və ya polyfill istifadə edin

Nəticə

Shadow DOM və Virtual DOM – hər ikisi veb inkişafında güclü texnologiyalardır. Shadow DOM daha çox komponent səviyyəsində təhlükəsizliyi və izolyasiyanı təmin edir. Virtual DOM isə performansı artıraraq böyük və interaktiv tətbiqlərin daha səmərəli işləməsinə şərait yaradır.

Əgər Web Components ilə maraqlanırsınızsa – Shadow DOM öyrənməyə dəyər. Əgər React və ya Vue istifadə edirsinizsə – artıq Virtual DOM ilə işləyirsiniz!