Sanal DOM: arayüz değişikliklerini gerçek DOM'a daha az dokunarak uygulamak
Sanal DOM, arayüzün bellekteki hafif bir kopyasıdır; React gibi kütüphaneler değişiklikleri önce burada karşılaştırıp gerçek DOM'u gerektiği kadar günceller.
Sanal DOM nedir?
Sanal DOM (virtual DOM), arayüzün bellekte tutulan hafif bir JavaScript nesne temsilidir. Gerçek DOM, tarayıcının sayfayı oluşturan ağaç yapısıdır ve onu doğrudan değiştirmek, yerleşim hesaplama ve yeniden çizim gerektirdiği için pahalı olabilir. Sanal DOM, değişikliği önce bellekteki temsil üzerinde hesaplar; gerçek DOM'a sadece gerekli güncellemeler uygulanır.
Bu fikir en çok React ile anılır. Geliştirici arayüzün belirli bir durumda nasıl görünmesi gerektiğini tarif eder; kütüphane, bu tarifi nasıl uygulayacağını hesaplar.
Nasıl çalışır?
Süreç şu adımlarla işler:
- Bileşen ilk kez çizildiğinde bir sanal ağaç oluşur ve gerçek DOM bu ağaca göre kurulur.
- Durum (state) ya da props değiştiğinde bileşen yeniden çalışır ve yeni bir sanal ağaç üretir.
- Kütüphane yeni ağacı öncekiyle karşılaştırır. Bu işleme uzlaştırma (reconciliation), karşılaştırma algoritmasına ise farklılaştırma (diffing) denir.
- Aradaki farklar bir değişiklik listesine dönüşür.
- Yalnız bu değişiklikler gerçek DOM'a uygulanır (commit).
Böylece bir listede tek bir öğe değiştiğinde bütün sayfa yeniden kurulmaz, sadece o öğeyi temsil eden düğüm güncellenir.
Karşılaştırma nasıl yapılır?
Ağaçları tam olarak karşılaştırmak maliyetli olacağından React makul varsayımlar kullanır. Farklı türdeki öğeler (örneğin div yerine span) bambaşka ağaçlar sayılır ve alt öğeleriyle birlikte yeniden kurulur. Aynı türde öğelerde yalnız değişen özellikler güncellenir.
Listelerde her öğeye verilen kararlı bir anahtar (key), kütüphanenin hangi öğenin eklendiğini, silindiğini ya da yer değiştirdiğini doğru anlamasını sağlar. Dizin numarasını anahtar olarak kullanmak, sıra değiştiğinde yanlış öğenin durumunu korumaya ya da gereksiz yeniden çizime yol açabilir.
Küçük bir örnek
Örneğin bir yapılacaklar listesinde kullanıcı bir maddeyi tamamlandı olarak işaretliyor. Bileşen durumu güncellenir ve yeni sanal ağaç, o maddenin üstünü çizili göstermek üzere farklı bir sınıf adıyla üretilir.
Kütüphane eski ve yeni ağacı karşılaştırır, listenin diğer maddelerinin aynı kaldığını görür ve sadece o madde düğümünün sınıf özelliğini değiştirir. Geliştirici DOM'a hiç dokunmadı; yalnız durumu güncelledi ve görünüm bu durumun yansıması olarak değişti. Örnek kurgusaldır.
Yaygın yanılgılar
Sanal DOM her zaman doğrudan DOM işleminden hızlıdır diye bir şey yoktur. Elle ve çok dikkatli yazılmış doğrudan güncellemeler daha hızlı olabilir. Sanal DOM'un asıl değeri, büyük arayüzlerde güncellemeleri otomatik ve yeterince verimli yapması, geliştiriciyi DOM yönetiminden kurtarmasıdır.
Bir başka yanılgı, sanal DOM sayesinde yeniden çizimin hiç maliyeti olmadığıdır. Bileşen her güncellendiğinde yeni ağacı üretmek ve karşılaştırmak yine işlemci süresi harcar. Gereksiz yeniden çalıştırmalar azaltılmadığında büyük listelerde yavaşlama görülür. Bu yüzden memoization, durumu bileşen ağacında doğru yere koymak ve listeleri sanallaştırmak performans çalışmalarının konusudur.
Bazı kütüphaneler (örneğin Svelte) sanal DOM kullanmadan, derleme zamanında hangi DOM güncellemesinin gerektiğini hesaplayan başka bir yol seçer.
Gerçek DOM ve gölge DOM ile farkı
Gerçek DOM, tarayıcının sayfa için tuttuğu yapıdır. Sanal DOM, bir kütüphanenin kendi bellekte tuttuğu ve gerçek DOM'a karşılık gelen bir taslaktır. Gölge DOM (shadow DOM) ise tarayıcı özelliğidir ve web bileşenlerinin stil ve yapısını dışarıdan yalıtmaya yarar; sanal DOM ile ilgisi yoktur, adının benzerliği karışıklığa yol açar.
React içinde de, güncelleme sırasını yöneten ve işi parçalayabilen iç mimari, sanal DOM fikrini genişletir; ayrıntısına React belgesinden bakılabilir.
Mindset programlarında nerede çalışılır?
Modern Web Geliştirme, Frontend (React) programı, React ekosistemi ve modern geliştirme ortamından bileşen mimarisine, hook'larla durum ve yan etkilere, global durum yönetimine ve performans optimizasyonuna uzanır; ön yüz geliştiricileri için temel bir yoldur. Bileşen başına veri akışını anlamak isteyen ekipler için başlangıç noktasıdır.
React İleri Seviye: Performans ve Durum Yönetimi programı, bu sayfadaki konunun derinine iner: React render modeli, durum yerleştirme ve bileşen kompozisyonu, memoization ve referans kararlılığı, eşzamanlı özellikler ile liste performansı ve ölçüm. Üretimde yavaşlayan arayüzleri teşhis etmek isteyen deneyimli geliştirici ekipleri için uygundur.
İlgili Mindset programı
Modern Web Geliştirme — Frontend (React)
Sık sorulan sorular
Sanal DOM ile gerçek DOM arasındaki temel fark nedir?
Gerçek DOM tarayıcının sayfayı oluşturan ağacıdır ve değişiklikleri ekranda görünür kılar. Sanal DOM ise bellekteki hafif bir kopyadır. Değişiklik önce sanal ağaçta hesaplanır, sonra gerçek DOM'a gereken en az güncelleme olarak aktarılır.
React'te key neden gereklidir?
Anahtar, listedeki her öğenin kararlı bir kimliğini verir. Kütüphane karşılaştırma sırasında hangi öğenin eklendiğini, silindiğini ya da taşındığını anahtara bakarak anlar. Anahtar yoksa ya da dizin kullanılırsa sıra değiştiğinde durum yanlış öğeyle eşleşebilir.
Her çerçeve sanal DOM kullanır mı?
Hayır. React ve Vue sanal DOM tabanlı çalışır; Svelte ve Solid gibi çerçeveler ise derleme zamanında hesaplanan doğrudan güncellemelerle sanal DOM'suz çalışır. Her yaklaşımın hız, bellek ve geliştirici deneyimi açısından kendine özgü dengeleri vardır.
Sanal DOM performans sorunlarını çözer mi?
Tek başına çözmez. Güncelleme maliyetini azaltır ama gereksiz yeniden çalışmaları engellemez. Performans için durumu doğru yerde tutmak, ağır hesapları önbelleğe almak, listeleri sanallaştırmak ve profil çıkararak darboğazı varsayım yerine ölçümle bulmak gerekir.