Canlı Sohbet Akışını 3,700+ Mesajda Nasıl Sorunsuz Hale Getirdim
Canlı alışveriş akışı için geliştirdiğim LiveShop ile mesaj yoğunluğunun üstesinden nasıl geldim? Performans iyileştirmeleri ve sonuçlar burada.
LiveShop, canlı alışveriş akışlarını simüle eden bir arayüzdür. Mesaj yoğunluğu arttığında, basit bir chat feed uygulaması, performans sorunlarına yol açabiliyor. 50 mesajda sorun görünmezken, birkaç yüz mesajda her yeni mesaj tüm DOM'u yeniden render ediyor ve bu da akışta takılmalara neden oluyor.
Bu sorunu çözmek için, liste sanallaştırma yöntemi olan react-window kullanıldı. Bu sayede yalnızca görünür kaydırma alanındaki satırlar render ediliyor ve DOM düğüm sayısı sabit kalıyor. Sonuç olarak, 3,700 mesajda bile akış 60fps'de sabit kalıyor ve DOM düğüm sayısı yalnızca 14'e düşüyor.