Karusel Yüklemede Ön Uç Bellek Kullanımını 30 Kat Artırma

2020'nin ikinci çeyreğinde, deneyimler sayfasında bir teknik yeniden yapılandırma gerçekleştirdik, React'e yeniden yazdık ve REST API'yi kullandık. Ancak uygulama sırasında ilginç bir sorunla karşılaştık.

Deneyimler sayfasında her biri en az 60 kutucuk içeren yaklaşık 20 karusel bulunmaktadır. Dolayısıyla sayfa, başlık, kullanıcı puanı, eşzamanlı kullanıcı sayısı ve küçük resim gibi ilgili bilgiler dahil olmak üzere 1.200'den fazla deneyimi görüntüler. Her karuselde, sağ kaydırma düğmesine tıklandığında, daha fazla deneyim varsa bir sonraki deneyim grubunu yüklemek için bir istek gönderilir. Ardından, istekten elde edilen yeni veriler karusele eklenecek, bu da DOM'a daha fazla düğüm ekleneceği ve tarayıcıda daha fazla küçük resim görüntüleneceği anlamına geliyor. Kullanıcılar daha fazla veri istemek için kaydırdıkça tarayıcıdaki bellek kullanımı artacak ve ardından kullanıcı deneyimi yavaşlayacak ve gecikme yaşanmaya başlayacaktır.

Bellek Profili

Bu sorunu profillemek için Chrome Geliştirici Araçlarını kullanabiliriz. İlk anlık görüntü, sayfa ilk yüklendiğinde alınır; ikincisi ise kullanıcı bir karuseldeki bir sonraki kaydırma düğmesine 12 kez tıkladıktan sonra alınır. 100'den fazla dize düğümü ve artan küçük resim işleme nedeniyle bellek kullanımında yaklaşık 9,7 MB'lık bir artış görüyoruz.

Çözüm

Karusel kaydırıldığında, kullanıcılar yalnızca karusel penceresindeki öğeleri görür. Örneğin, 1920×1080 çözünürlüklü bir dizüstü bilgisayarda, tam ekran tarayıcıda her seferinde yalnızca ~9 öğe görünür. Bu nedenle, görünmeyen tüm düğümleri ve küçük resimleri bir arada görüntülemek veya istekten döndürülen daha fazla veriyi DOM'a taşımak gereksizdir.

İşte fikir şu: API isteğinden ham verileri ilk kez aldıktan sonra, DOM'a işlenmeye hazırlamak için aynı uzunlukta bir dizi oluştururuz. İşleme dizisi içinde, ekranı doldurup bir sonrakine kaydırmak için yeterli miktarda veriyi doldurabiliriz. Dizinin geri kalanı, yalnızca görüntüleme penceresi ona yaklaştığında doldurulur. Görüntüleme verilerinin aralığını kaydetmek için iki indeks verelim: renderingStartIndex ve renderingEndIndex. Listedeki hangi başlangıç konumunun görünür olduğunu belirtmek için bir imleç kurarız. Kaydırma sırasında, imleci sürekli olarak ilk görünür öğenin indeksine güncellememiz gerekir. Kaydırma animasyonu bitmeden önce, bir sonraki imlecin görüntüleme verileri dizisinin içinde olup olmadığını kontrol etmemiz gerekecektir. Karusel penceresinin boyutuna ve kart boyutuna göre, görüntüleme penceresine kaç tane görünür öğenin sığacağını kolayca belirleyebiliriz. Ardından, mevcut penceredeki ve bir sonraki penceredeki öğelerin görüntüleme verisi dizisinin aralığı içinde olduğundan emin olmalıyız. Değilse, boş listeyi doldurmak için ham verilerden öğeleri alırken, aynı zamanda imleç konumundan önceki verileri de temizleriz. Bu, kullanıcılar sağa veya sola kaydırdığında geçerli olacaktır. Kullanıcılar sağa kaydırdığında, arka planda daha fazla veri alarak, yeni verileri her aldığımızda ham verileri doldururuz. Ancak, ham veriler sayfa görüntüleme sürecine dahil edilmez.

Bellek Profili

Chrome Geliştirici Araçlarına tekrar bakalım. Daha önce olduğu gibi, ilk anlık görüntü başlatma anında, ikincisi ise 12 kez sağa kaydırıldıktan sonra alınmıştır. Artık 100'den fazla öğeyi yüklemek, önceki 9,7 MB'nin aksine yalnızca 0,3 MB'lik bir bellek artışı gerektiriyor.

Sırada ne var?

Büyük veri pencerelerini işleyebilmek için karusel bileşenini iyileştirmenin yanı sıra, bir özelliği/sayfayı yeniden düzenlediğimizde, performans bilgilerini yakalamak için daha fazla karşılaştırma ölçütü eklememiz gerekiyor.

Modern web uygulama yığını ön uca doğru kayarken, ön uç telemetrisini yakalamak ve iyileştirmek, geleneksel arka uç telemetrisi kadar önemlidir.