# DOM vs Virtual DOM

Adres: https://softwaredictionary.org/tr/karsilastirma/dom-vs-virtual-dom
Son güncelleme: 2026-09-30

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.

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

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.

| Ö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 |

## 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.

## 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.

---

Software Dictionary: https://softwaredictionary.org/tr · https://softwaredictionary.org/tr/llms.txt