Sanal DOM

İngilizcesi: Virtual DOM
Okunuşu: vörçuıl dom

Günlük kullanımda iki ad da yaygın.

Güncellendi 30 Eylül 20262 dk okuma

Kısaca

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 (virtual DOM) nedir?

Sanal DOM, gerçek DOM'un, yani tarayıcının sayfa öğeleri ağacının yapısını yansıtan, düz JavaScript nesnelerinden oluşan bir arayüz temsilidir. React ya da Vue gibi bir arayüz kütüphanesi, sayfayı doğrudan değiştirmek yerine uygulamanın verisi her değiştiğinde yeni bir sanal DOM ağacı oluşturur ve sayfada gerçekte neyin değişmesi gerektiğini hesaplar.

Süreç üç adımdan oluşur. Önce kütüphane mevcut durumdan yeni bir sanal ağaç render eder; ikinci olarak bu ağacı öncekiyle karşılaştırır, bu adıma diffing denir (React tüm sürece reconciliation der). Üçüncüsü yalnızca farkları gerçek DOM'a uygular; örneğin tüm listeyi yeniden oluşturmak yerine tek bir liste öğesinin metnini günceller. React'in key prop'u gibi anahtarlar da yer değiştiren liste öğelerini eşleştirmesine yardımcı olur.

Bu, bir mimarın her revizyondan sonra evi yıkıp yeniden yapmak yerine planı düzenleyip inşaatçılara kısa bir değişiklik listesi göndermesine benzer. Asıl yarar geliştiricilere aittir: belirli bir durum için arayüzün nasıl görünmesi gerektiğini tarif edersiniz, DOM işlemlerini kütüphane çözer; bu da sayfayı elle güncellemekten doğan birçok hatayı önler.

Yaygın bir yanılgı, sanal DOM'un gerçek DOM'dan daha hızlı olduğudur. Dikkatle hedeflenmiş doğrudan DOM güncellemeleri daha hızlıdır; çünkü diffing ek iş getirir. Sanal DOM, bildirimsel (declarative) kod yazmanıza izin verirken güncellemeleri makul ölçüde hızlı tutan bir ödünleşimdir; Svelte ve Solid gibi framework'ler ise bileşenleri derleyerek ya da ince taneli değişiklikleri izleyerek onu tamamen atlar. Sanal DOM ayrıca, bir web bileşeninin işaretlemesini ve stillerini yalıtan bir tarayıcı özelliği olan shadow DOM ile de ilgisizdir.

Önemli noktalar

Sanal DOM, sayfanın öğe ağacının bellekteki JavaScript kopyasıdır.
Kütüphaneler yeni sanal ağacı eskisiyle karşılaştırır ve yalnızca değişeni günceller.
Asıl yararı, elle yazılmış DOM güncellemelerine göre ham hız değil, bildirimsel koddur.
Anahtarlar (key), diffing algoritmasının eklenen, kaldırılan veya taşınan liste öğelerini izlemesine yardımcı olur.
Web bileşeni işaretlemesini ve stillerini yalıtan shadow DOM'dan farklıdır.

Örnek

İki sanal DOM ağacı ve aralarındaki tek değişiklikjavascript

// A virtual DOM node is just a plain object describing an element
const oldTree = { type: "ul", children: [
  { type: "li", key: "a", text: "Milk" },
  { type: "li", key: "b", text: "Eggs" },
]};

const newTree = { type: "ul", children: [
  { type: "li", key: "a", text: "Milk" },
  { type: "li", key: "b", text: "Eggs (12)" }, // only this changed
]};

// Diffing finds one change, so only one real DOM update is needed:
// secondListItem.textContent = "Eggs (12)";

Sık sorulan sorular

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

Tek başına hayır. Diffing, mükemmel hedeflenmiş DOM güncellemelerine kıyasla ek iş getirir; sanal DOM'un değeri, basit ve bildirimsel arayüz kodu yazmanıza izin verirken güncellemeleri makul ölçüde verimli tutmasıdır.

Sanal DOM ile shadow DOM arasındaki fark nedir?

Sanal DOM, kütüphanelerin güncellemeleri hesaplamak için kullandığı arayüzün JavaScript kopyasıdır. Shadow DOM ise bir web bileşenine kendine ait yalıtılmış bir öğe ve stil ağacı veren tarayıcı özelliğidir.

Hangi framework'ler sanal DOM kullanır?

React ve Preact sanal DOM kullanır, Vue da varsayılan olarak kullanır. Svelte ve Solid gibi framework'ler bileşenleri derleyerek ya da ince taneli değişiklikleri izleyerek ondan kaçınır; böylece yalnızca değişen veriye bağlı DOM düğümlerini günceller.

Sık karşılaştırılanlar

DOM vs Virtual DOMDOM, 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.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin