Yan yana

DOMvsSanal DOM

DOM ile sanal DOM (virtual DOM) arasındaki fark nedir?

Güncellendi 30 Eylül 20262 dk okuma6 fark

Kısaca

DOM, tarayıcının sayfa öğelerinden oluşan canlı ağacıdır; sanal DOM ise framework'lerin neyi değiştireceğine karar vermek için baktığı hafif bir kopyadır.

Web Geliştirmes. 14

DOM

Belge Nesne Modeli

DOM, tarayıcının bir web sayfasını temsil eden ve JavaScript'in okuyup değiştirerek kullanıcının gördüğünü güncelleyebildiği bellek içi nesne ağacıdır.

DOM sayfasını oku

Web Geliştirmes. 39

Sanal DOM

Sanal DOM, sayfanın öğe ağacının JavaScript belleğinde tutulan hafif bir kopyasıdır; arayüz kütüphaneleri onu karşılaştırarak gerçek DOM'u verimli günceller.

Sanal DOM sayfasını oku

DOM ve Sanal DOM karşılaştırması

Özellik	DOM	Sanal DOM
Nedir	Tarayıcının sayfadaki öğelerden oluşan canlı ağacı	İstenen arayüzü tarif eden bir JavaScript nesne ağacı
Kim sağlar	Tarayıcı, standart web API'leri aracılığıyla	React gibi bir arayüz kütüphanesi ya da framework'ü
Nasıl güncellenir	`appendChild` gibi doğrudan çağrılarla ya da `textContent` atayarak	Yeniden oluşturulur, eski ağaçla karşılaştırılır, sonra DOM'a yama uygulanır
Bir değişikliğin maliyeti	Tarayıcıda yerleşim (layout) ve yeniden boyamayı tetikleyebilir	Oluşturması ucuzdur; maliyet diffing'den ve son yamalardan gelir
Ekranda görünürlük	Evet, tarayıcının çizdiği budur	Hayır, yalnızca bellekte bulunur
Kodlama tarzı	Buyurgan (imperative): sayfanın nasıl değişeceğini söylersiniz	Bildirimsel (declarative): sayfanın nasıl görünmesi gerektiğini söylersiniz

Fark, açıklamalı

DOM (Document Object Model), tarayıcının HTML'den oluşturduğu nesne ağacıdır ve onu değiştirmek ekranda görünen şeyi değiştirir. Sanal DOM ise bu ağacın düz bir JavaScript temsilidir; React gibi kütüphanelerde kullanılır ve arayüzü sayfayı doğrudan düzenlemek yerine nesneler olarak tarif etmenizi sağlar.

Sanal DOM, arayüz kodunu basitleştirmek için vardır; DOM'un yerini almak için değil. Durum değiştiğinde kütüphane yeni bir sanal ağaç oluşturur, bunu bir öncekiyle diffing ya da reconciliation denen adımda karşılaştırır ve gerçek DOM'a yalnızca gerekli güncellemeleri uygular. Siz sayfanın nasıl görünmesi gerektiğini yazarsınız, nasıl değiştirileceğini kütüphane çözer.

İkisi her zaman birlikte çalışır: sanal DOM yalnızca bir plandır, tarayıcının ekrana çizdiği hâlâ gerçek DOM'dur. Her framework sanal DOM kullanmaz; bazıları bileşenleri doğrudan ilgili DOM düğümlerini güncelleyen koda derler, bazıları da ince taneli reaktif değerleri izler ve böylece diffing gerekmez.

Sık yapılan bir yanlış, sanal DOM'un DOM'dan daha hızlı olduğu düşüncesidir. Diffing, gerçek güncellemelerin üstüne eklenen ek bir iştir; bu yüzden özenle elle yazılmış DOM kodu daha hızlı olabilir. Asıl fayda, o elle yapılan çaba olmadan öngörülebilir ve makul ölçüde hızlı güncellemeler elde etmektir.

Hangisini kullanmalısınız?

DOM şu durumlarda doğru seçim:

Sayfa küçük ve yalnızca birkaç hedefli güncelleme gerekiyor.
Framework kullanmadan hafif bir widget ya da betik yazıyorsunuz.
Performansın kritik olduğu güncellemelerde tam denetime ihtiyacınız var.

Sanal DOM şu durumlarda doğru seçim:

Arayüzde birçok yerde değişen çok sayıda durum var.
Ekranları bileşenler olarak bildirimsel biçimde tarif etmek istiyorsunuz.
Ekibiniz zaten React gibi bir sanal DOM kütüphanesi kullanıyor.

Bir tıklama sayacı, iki yolla

DOMjsx

// Real DOM: you change the page step by step
const label = document.getElementById("label");
let count = 0;

button.addEventListener("click", () => {
  count += 1;
  label.textContent = `Clicked ${count} times`;
});

Sanal DOMjsx

// Virtual DOM: you describe the result, React diffs it
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Sık sorulan sorular

Sanal DOM, gerçek DOM'dan daha hızlı mı?

Doğası gereği değil. Bir diffing adımı ekler, ama gerçek DOM değişikliklerini kendiliğinden toplu hâle getirip en aza indirir; bu genellikle yeterince hızlıdır ve her güncellemeyi elle optimize etmekten çok daha kolaydır.

Her framework sanal DOM kullanır mı?

Hayır. Bazı framework'ler bileşenleri doğrudan DOM güncellemelerine derler ya da ince taneli reaktif değerleri izler; böylece sanal DOM'dan tamamen kaçınır.

Shadow DOM, sanal DOM ile aynı şey mi?

Hayır. Shadow DOM, bir bileşenin işaretlemesini ve stillerini sayfanın geri kalanından yalıtan bir tarayıcı özelliğidir; sanal DOM ise kütüphanelerin güncellemeleri planlamak için kullandığı bir JavaScript tekniğidir.