Sanal DOM Nedir? – Tasarım Kodlama
HTML JavaScript

Sanal DOM Nedir?

Geçenlerde DOM ve shadow DOM‘nin ne olduğu ve nasıl farklı oldukları hakkında yazmıştım. Özetlemek için DOM (Belge Nesne Modeli), bir HTML belgesinin nesne temelli bir temsilidir ve bu nesneyi işlemek için bir arabirimdir. Shadow DOM, DOM’un “alt” versiyonu olarak düşünülebilir. Aynı zamanda, HTML öğelerinin nesne temelli bir temsilidir, ancak tam bağımsız bir değildir. Bunun yerine, shadow DOM, DOM’umuzu HTML belgelerinde kullanılabilecek daha küçük, kapsüllenmiş bölümlere ayırmamızı sağlar.

Karşılaştığınız diğer benzer terim “sanal DOM” dur. Konsept birkaç yıldan beri var olmasına rağmen, React frameworkünde kullanımıyla daha popüler hale getirildi. Bu makalede, tam olarak sanal DOM’un ne olduğunu, orijinal DOM’dan nasıl farklı olduğunu ve nasıl kullanıldığını ele alacağım.

Neden sanal bir DOM’a ihtiyacımız var?

Sanal DOM kavramının neden ortaya çıktığını anlamak için, orijinal DOM’u tekrar gözden geçirelim. Bahsettiğim gibi, DOM’un iki bölümü vardır – HTML belgesinin nesne tabanlı temsili ve bu nesneyi işlemek için API.

Örneğin, bu basit HTML belgesini sırasız liste ve bir liste öğesi ile birlikte alalım.

Bu belge aşağıdaki DOM ağacı olarak gösterilebilir:

virtual dom nedir

Diyelim ki ilk liste öğesinin içeriğini “Liste öğesi bir” olarak değiştirmek ve ikinci bir liste öğesi eklemek istiyoruz. Bunu yapmak için, güncellemek istediğimiz öğeleri bulmak, yeni öğeler oluşturmak, nitelikler ve içerik eklemek ve sonunda DOM öğelerini kendileri güncellemek için DOM API’lerini kullanmamız gerekir.

DOM bunun için yapılmadı…

DOM için ilk şartname 1998’de yayımlandığında, web sayfalarını çok farklı bir şekilde oluşturulurdu ve yönetilirdi. Sayfa içeriğini bugün yaptığımız kadar sık oluşturmak ve güncellemek için DOM API’lerine çok daha az güvenilirdi.

document.getElementsByClassName() gibi basit yöntemler küçük ölçekli olarak kullanmaya uygundur, ancak bir kaç saniyede bir sayfada birden fazla öğe güncelliyorsak, DOM’yi sürekli sorgulamak ve güncellemek gerçekten masraflı bir hale gelmeye başlayabilir.

Dahası, API’lerin kurulum şekli nedeniyle, belgenin daha büyük bölümlerini güncellediğimizde, belirli öğeleri bulmaktan ve güncellemekten daha pahalı işlemler yapmak genellikle daha kolaydır. Liste örneğimize geri dönersek, bazı sıralanmamış listenin tamamını belirli öğeleri değiştirmek yerine yenisiyle değiştirmek bazı yönlerden daha kolaydır.

Bu özel örnekte, yöntemler arasındaki performans farkı muhtemelen önemsizdir. Bununla birlikte, web sayfasının boyutu büyüdükçe, yalnızca ihtiyaç duyulanın seçilmesi ve güncellenmesi daha önemli hale gelir.

… ama artık sanal DOM hayatımıza girdi!

Sanal DOM, DOM’yi daha performansla güncelleştirmek için gereken bu sorunları çözmek için oluşturuldu. DOM veya gölge DOM’dan farklı olarak, sanal DOM resmi bir özellik değil, DOM ile yeni bir arayüz oluşturma yöntemidir.

Sanal bir DOM, orijinal DOM’nin bir kopyası olarak düşünülebilir. Bu kopya, DOM API’leri kullanmadan, sıklıkla manipüle edilebilir ve güncellenebilir. Tüm güncellemeler sanal DOM’da yapıldıktan sonra, orijinal DOM’de hangi özel değişikliklerin yapılması gerektiğine bakabilir ve bunları hedeflenmiş ve optimize edilmiş bir şekilde yapabiliriz.

Sanal bir DOM neye benziyor?

“Sanal DOM” adı, kavramın gerçekte ne olduğunun gizemine eklenme eğilimindedir. Aslında, sanal bir DOM sadece normal bir Javascript nesnesidir.

Daha önce oluşturduğumuz DOM ağacını tekrar inceleyelim:

virtual dom nedir

Bu ağaç ayrıca bir Javascript nesnesi olarak da temsil edilebilir.

Bu nesneyi sanal DOM’umuz olarak düşünebiliriz. Orijinal DOM gibi, HTML belgemizin nesne temelli bir temsilidir. Fakat düz bir Javascript nesnesi olduğu için, ihtiyaç duyulana kadar gerçek DOM’a dokunmadan, özgürce ve sıkça değiştirebiliriz.

Tüm nesne için bir nesne kullanmak yerine, sanal DOM’un küçük bölümleriyle çalışmak daha yaygındır. Örneğin, sıralanmamış liste elemanımıza karşılık gelen bir liste bileşeni üzerinde çalışabiliriz.

 

Şimdi sanal bir DOM’nin neye benzediğini gördük, DOM’nin performans ve kullanılabilirlik sorunlarını çözmek için nasıl çalışıyor?

Bahsettiğim gibi, DOM’da yapılması gereken değişiklikleri belirlemek ve bu güncellemeleri tek başına yapmak için sanal DOM’yi kullanabiliriz. Sırasız liste örneğimize geri dönelim ve DOM API kullanarak yaptığımız değişiklikleri yapalım.

Yapacağımız ilk şey, yapmak istediğimiz değişiklikleri içeren sanal DOM’un bir kopyasını çıkarmak. DOM API’lerini kullanmamız gerekmediğinden, aslında tamamen yeni bir nesne oluşturabiliriz.

Bu kopya, orijinal sanal DOM, bu durumda liste ve güncellenmiş olan arasında “fark” denilen şeyi oluşturmak için kullanılır. Bir fark böyle bir şeye benzeyebilir:

Bu fark, gerçek DOM’in nasıl güncelleneceği ile ilgili talimatlar sunar. Tüm farklar toplandıktan sonra, sadece gerekli olan güncellemeleri yaparak DOM’daki değişiklikleri toplu olarak yapabiliriz.

Örneğin, her bir fark arasında döngü kurabilir ve yeni bir çocuk ekleyebilir veya farkın ne olduğuna bağlı olarak eski bir çocuğu güncelleyebiliriz.

Bunun, sanal bir DOM’un nasıl çalışabileceğinin gerçekten basitleştirilmiş ve elimden alınmış bir sürüm olduğunu ve burada ele almadığım birçok durum olduğunu unutmayın.

Sanal DOM ve Frameworkleri

Sanal DOM ile bir framework kullanarak çalışmak doğrudan yukarıdaki gibi kullanmaktan daha kolaydır.

React ve Vue gibi frameworkler, DOM’da daha performanslı güncellemeleri yapmak için sanal DOM konseptini kullanır. Örneğin, liste bileşenimiz React’e aşağıdaki şekilde yazılabilir.

Listemizi güncellemek istiyorsak, tüm liste şablonunu yeniden yazabilir ve yeni listeye girerek ReactDOM.render() öğesini tekrar arayabiliriz.

React sanal DOM kullandığından, tüm şablonu yeniden oluşturmamıza rağmen, yalnızca gerçekten değişen parçalar güncellenir. Değişiklik olduğunda geliştirici araçlarımıza bakarsak, belirli öğeleri ve değişen öğelerin belirli bölümlerini göreceğiz.

Örnek uygulama

 

 

Yorum bırak