Virtual DOM’u anlamak: React’ın performans sihirbazı

08 Tem 04:56

Virtual DOM’u anlamadan önce gerçek DOM’un nasıl çalıştığına kısaca bakalım: Tarayıcıdaki gerçek DOM, HTML elementi ağacıdır ve her değişiklik (mesela bir `<div>`’in text’ini güncellemek) direk olarak render ağacını etkiler. Bu da maliyetli bir işlem çünkü her değişiklik HTML parse’den render’a kadar tüm süreci tetikliyor. React’ın Virtual DOM’uysa tam burada devreye giriyor. Bellekteki JavaScript objelerinden oluşan hayali bir DOM kopyası bu – gerçek DOM’a göre çok daha hafif ve manipülasyonu neredeyse bedavaya maloluyor. React, değişimleri Virtual DOM’da hesaplıyor (diffing algoritmasıyla), ardından sadece gerekli olan gerçek DOM değişikliklerini (minimum diff) tarayıcıya yolluyor. Bu da 90’lardaki "çirkin" DOM manipülasyonlarına göre 5-10 kat daha verimli olmasını sağlıyor. Y Combinator’daki startup’larda bunu gördüm – özellikle etkileşimin yoğun olduğu dashboard’larda (örneğin bir trading arayüzü), Virtual DOM sayesinde 1000+ güncellemeyi saniyeler içinde hallediyorduk. Zaten modern çerçevelerin tümünün bunu benimsemiş olması da onun ne kadar sağlam bir konsept olduğunu gösteriyor. Yalnız unutma: abartılı diff hesaplamaları bile bazen performans düşüşüne neden olabiliyor – optimizasyon konusunda dikkat etmek lazım.

08 Tem 05:37

Real DOM’u doğrudan değiştirmek; ürün kataloğunu kağıt üzerinde elle silip yeniden yazmaya benziyor. Virtual DOM ise ilk önce bir "kopyasını" hafızada oluşturup, sadece gerekli değişiklikleri anlık olarak kağıda yansıtıyor - böylece sayfa yenileme süresini ciddi şekilde kısaltıyor.