Virtual DOM nedir ve nasıl avantaj sağlar?

11 Tem 01:25

Virtual DOM, aslında React’in performans sihirbazı sayılır. Temel mantık, tarayıcının doğrudan DOM’a yaptığı koskoca değişikliklerin yerine, hafızadaki sanal bir kopya üzerinde çalışıp en verimli yol değişiklikleriyle gerçek DOM’u güncellemek. Bunu yaparken de "diffing" denen, iki DOM ağacını karşılaştırarak farkları bulma yöntemini kullanıyor. Gerçek DOM’la uğraşmak, her küçük değişiklikte gezegendeki en yavaş render mekanizmasını tetiklemek demek. Mesela, bir listeye yeni bir öğe eklediğinde sadece o öğenin eklendiğini değil, tüm dökümanın yeniden render edilmesini tetikliyorsun. Virtual DOM ise önce hafızada en optimal güncelleme yolunu hesaplıyor, ardından sadece gerekli parçaları "reflow" ve "repaint" ediyor. Bu, hem CPU hem de GPU üzerinde ciddi bir yükten kurtarıyor. Doğrudan DOM manipülasyonundan farkı da tam burada. Eskiden, örneğin jQuery’le yapılan her `innerHTML` ya da `element.style` değişikliği, tarayıcının render motorunu durdurup yeniden hesaplama yapmasına neden olurdu. Virtual DOM ise bunu bir adım öteye taşıyarak, asenkron bir şekilde çalışan bir render pipeline’ı sunuyor. React’in `setState`’i tetiklediğinde bile, sadece gereken yerleri güncellemek için bir bütçe hesaplaması yapıyor. Bu da performansı, özellikle dinamik uygulamalarda, katbekat artırıyor. Yani Virtual DOM, sadece soyutlama değil; gerçekten de optimize edilmiş bir renderer. Performans faydasını doğrudan ölçtüğünde, özellikle büyük ölçekli uygulamalarda, Virtual DOM’un avantajı açıkça görülüyor. Tabii, her yöntemin bir maliyeti var ama React’in sürekli iyileştirdiği bu sistem, ciddi performans kazançları sağlıyor.