Evcil hayvan bakım platformumuz Petinom'u geliştirmeye başladığımızda, performans en önemli önceliğimizdi. Mobil kullanıcılar sabırsızdır. Araştırmalar, kullanıcıların %53'ünün yüklenmesi 3 saniyeden uzun süren bir uygulamayı terk ettiğini göstermektedir. Evcil hayvanlarının sağlık kayıtlarını endişeyle kontrol eden sahipler için her milisaniye önemlidir.
React Native performans optimizasyonu bir kontrol listesi uygulamak değildir. JavaScript ve native kod arasındaki köprüyü anlamak, ana iş parçacığının ne zaman bloke olduğunu bilmek ve her değişiklik öncesinde ve sonrasında her şeyi ölçmekle ilgilidir. İşte öne çıkan yaklaşımlar.
Tembel Yükleme ve Kod Bölme
Büyüyen bir JavaScript paketi, herhangi bir React Native uygulamasındaki ilk performans darboğazlarından biridir. Orta segment Android cihazlar özellikle büyük başlangıç paketlerine duyarlıdır. Başlatma sırasını profilleme, çoğu kullanıcının her oturumda ziyaret etmese de birçok ekranın önceden yüklendiğini ortaya çıkarır.
Her ekran için özel yükleme durumlarıyla React.lazy() uygulamak, başlangıç paket boyutunu önemli ölçüde küçültebilir. Navigasyon yığını için rota bazlı kod bölme ile birleştirildiğinde, her ekran grubu bağımsız olarak yüklenir ve özellikle orta segment cihazlarda belirgin bir hız artışı sağlar.
Temel ders, tüm tembel yüklemenin eşit olmadığıdır. Kullanıcı akışlarını ölçmek, en sık ziyaret edilen ekranların hevesle yüklenmesini önceliklendirmeye yardımcı olur, geri kalan her şey talep üzerine yüklenir.
Optimize Edilmiş Liste Render'ı
Petinom sağlık kayıtları, aşı takvimleri, ilaç günlükleri ve aktivite geçmişlerini yönetir. Aktif bir kullanıcının birden fazla evcil hayvan arasında yüzlerce kaydı olabilir. FlatList ile ilk uygulamamız gözle görülür şekilde takılıyordu. 200'den fazla kayıt arasında kaydırma FPS'i 15-20'ye düşürüyordu.
Shopify'ın FlashList'i güçlü bir alternatiftir. Native RecyclerView/UICollectionView gibi görünümleri geri dönüştürür, çok daha az bileşen örneği oluşturur. Sonuç olarak büyük veri setlerinde bile akıcı 60 FPS kaydırma sağlar.
Ancak tek başına FlashList her zaman yeterli olmaz. Bileşen mimarisi de önemlidir. Liste öğeleri satır içi stiller ve anonim fonksiyon prop'ları nedeniyle her kaydırmada yeniden render oluyorsa, liste implementasyonundan bağımsız olarak performans düşer. Bileşenleri ayırma, React.memo() ile memoize etme ve işleyiciler için useCallback() kullanma, gereksiz yeniden render'ları önemli ölçüde azaltabilir.
Görsel Optimizasyonu
Görsel yoğun uygulamalarda kullanıcılar düzinelerce fotoğraf biriktirebilir ve bunların ızgara ya da galeri olarak gösterilmesi gerekir. Optimizasyon olmadan bu, bellek baskısına ve kaydırma takılmalarına yol açar.
Üç katmanlı bir görsel stratejisi burada iyi çalışır: küçük bulanık yer tutucular anında yüklenir ve renk önizlemesi sağlar, orta boy küçük resimler liste görünümleri için yüklenir ve tam çözünürlüklü görseller yalnızca kullanıcı detayları görüntülemek için dokunduğunda yüklenir. expo-image gibi kütüphaneler disk ve bellek önbellek katmanlarını otomatik olarak yönetir.
Bu yaklaşım, görsel-yoğun ekranlar için hem algılanan yükleme süresini hem de bellek kullanımını önemli ölçüde azaltır.
Bellek Yönetimi
React Native'deki bellek sızıntıları ince ve tehlikelidir. Uygulamayı anında çökertmezler. Bunun yerine uygulama bir oturum boyunca yavaş yavaş yavaşlar ve işletim sistemi onu sonlandırana kadar devam eder. Temizlik için katı kalıplar oluşturmak şarttır: abonelik oluşturan her useEffect bir temizleme fonksiyonu döndürmeli, her zamanlayıcı temizlenmeli ve her olay dinleyicisi kaldırılmalıdır.
Kullanışlı bir kalıp, uygulama simge durumuna küçültüldüğünde arka plan işlemlerini otomatik olarak durduran özel bir hook geliştirmektir: konum takibini durdurmak, gerçek zamanlı senkronizasyonu duraklatmak ve zamanlayıcı frekansını azaltmak gibi. Agresif pil optimizasyonunun arka plan süreçlerini sonlandırabildiği Android'de bu yaklaşım güvenilirlik için zorunludur.