Büyük Liste Görüntüleme Sorunu

On bin öğeden oluşan bir dizi üzerinde dolaşıp her öğe için bir li öğesi oluşturduğunuzu varsayın. React, aynı anda ekrana yalnızca birkaç düzine öğe sığmasına rağmen görevini yerine getirerek on bin DOM düğümü oluşturur.

Bu düğümlerin çoğu ekran dışındadır ve görünmez; yine de tarayıcının her birini oluşturması, yerleşimini hesaplaması ve yönetmesi gerekir.

Tarayıcı, büyük DOM ağaçları için gerçek bir bedel öder. Yerleşim, stilin yeniden hesaplanması ve bellek kullanımı düğüm sayısıyla birlikte artar; bu nedenle çok büyük bir liste ilk oluşturmayı yavaşlatır ve bellek kullanımını artırır.

İzlenecek ve yeniden akışı hesaplanacak on binlerce düğüm olduğunda basit etkileşimlerde bile takılmalar görülebilir.

Kullanıcıların sorunu en çok hissettiği yer, çok büyük bir listede kaydırma yapmaktır. İçerik hareket ederken tarayıcı yeniden çizim yapar ve yerleşimi yeniden hesaplayabilir; düğüm sayısı çok fazla olduğunda kare hızı akıcı seviyenin altına düşer.

Sonuç, uygulamanın geri kalanı ne kadar hızlı olursa olsun arayüzü yanıt vermiyormuş gibi hissettiren takılarak ve gecikmeli kaydırmadır.

Sorunu, sayfadaki DOM düğümlerinin sayısını bildiren tarayıcının DevTools Bellek panelinde doğrulayabilirsiniz. Binlerce düğüm oluşturan bir liste burada açıkça görünür.

Daha fazla öğe oluşturdukça bu sayının hızla arttığını izlemek, darboğazın DOM boyutu olduğuna dair somut kanıt sağlar.

Bazen pencereleme olarak da adlandırılan sanallaştırma, listenin tamamı yerine yalnızca o anda görünür olan öğeleri ve küçük bir arabelleği oluşturur. Kaydırdıkça görünür alana giren öğeler bağlanır, çıkan öğelerin bağlantısı kaldırılır.

Bu yaklaşım, verilerde kaç öğe olursa olsun canlı DOM'u küçük tutar ve DOM boyutunu veri kümesinin boyutundan bağımsızlaştırır.

Görünür pencere, kaydırma konumundan, kapsayıcının yüksekliğinden ve öğe yüksekliğinden türetilir. Görünüm alanının yüksekliğini öğe yüksekliğine bölmek, yaklaşık olarak kaç satırın sığacağını verir; kaydırma uzaklığı da bunların hangi satırlar olduğunu gösterir.

Kütüphane, her an tam olarak hangi öğe diliminin oluşturulacağına karar vermek için bu sayıları kullanır.

Pencerelemeyi uygulayan birkaç kütüphane vardır. react-virtualized özellik bakımından zengindir ancak daha büyüktür; react-window aynı yazarın daha küçük ve amaca odaklanmış yeniden yazımıdır; TanStack Virtual ise modern, başlıksız bir seçenektir.

Çoğu liste için react-window, basitlik ve performans arasında mükemmel bir denge sunar; bu nedenle bu kursta ona odaklanıyoruz.

Sanallaştırma, listeler uzun olduğunda (kabaca birkaç yüz satır veya daha fazla) ya da satırlar görseller ve iç içe bileşenlerle ağırlaştığında yarar sağlar. DOM boyutunun gerçekten zarar verdiği durumlar bunlardır.

Sonsuz akışlar, büyük veri tabloları ve sohbet geçmişleri, pencerelemenin isteğe bağlı olmaktan çıkıp gerekli hâle geldiği tipik senaryolardır.

Birkaç düzine basit öğeden oluşan kısa listelerde sanallaştırma, anlamlı bir yarar sağlamadan karmaşıklık ekler. Mutlak konumlandırma ve ölçüm yükü, toplamda performansı daha da kötüleştirebilir.

Pencerelemeyi gerçekten büyük veri kümelerine ayırın; küçük veri kümelerinde düz bir map kullanmak daha basittir ve tamamen yeterli hız sunar.

Pencereleme sayesinde yüz bin öğelik bir liste, DOM'da yalnızca görünür birkaç öğeyi tutar. Böylece ilk oluşturma hızlı olur, bellek kullanımı düşük kalır ve kaydırma akıcıdır.

Kurulumda biraz karmaşıklığı, performansın sahip olduğunuz veri miktarına artık bağlı olmaması karşılığında üstlenirsiniz. Sanallaştırmanın temel vaadi budur.

Sanallaştırmanın ne zaman yararlı olduğuna karar verin.

Binlerce DOM düğümü oluşturmak yerleşim maliyetini ve bellek kullanımını artırır, kaydırmada takılmalara yol açar; bunu DevTools'taki düğüm sayısından doğrulayabilirsiniz. Sanallaştırma yalnızca görünür pencereyi ve bir arabelleği oluşturarak DOM'u küçük tutar.

react-window, react-virtualized ve TanStack Virtual arasındaki odaklanmış, hafif bir seçenektir. Büyük veya ağır listelerde kullanın; kısa ve basit listelerde ise kullanmayın.