Profiling

Profiling ve performans ölçümünü öğrenirsin.

Profiling nedir?

Profil çıkarma (profiling), uygulamanın nerede zaman harcadığını ölçmektir. React Native'de bu, JS ve native tarafı ayrı ayrı ölçmeyi gerektirir; darboğaz hangi tarafta olduğunu bilmek önemlidir.

React Native, Perf Monitor ile JS ve UI thread kare sürelerini gösterir. Daha derin analiz için react-native-performance ve Flipper kullanılır. Ölçmeden optimize etme; önce ölç, sonra darboğazı bul.

Perf Monitor

React Native'in Perf Monitor'ü geliştirici menüsünden açılır. Ekranda iki çubuk görünür: üstte JS, altta UI thread. Her biri kare başına milisaniye gösterir.

JS çubuğu sürekli yüksekse sorun JS tarafında; UI çubuğu yüksekse native render darboğazı var. Hedef 16 ms'dir; bu 60 FPS demektir.

Uygulama Perf Monitor bayrağını aç

React Native geliştirici ayarlarında Perf Monitor'ü açan bayrağı yaz. Değer true olsun, anahtar showPerfMonitor olsun.

Örnek çözümü göster

// app.json içine eklenecek bayrak
export default {
  expo: {
    name: 'Uygulama',
    showPerfMonitor: true
  }
};

Kendini test et

Performans sorununu çözmeye başlamadan önce ne yapılır?
- Üçüncü partı kütüphane eklemek
- Hemen kodu yeniden yazmak
- Profil çıkarıp ölçmek
- Expo'yu kaldırmak
Cevabı göster

Profil çıkarıp ölçmek — Önce ölçüm yapılır, sonra darboğaza müdahale edilir.

Hedef kare süresini yaz

60 FPS için hedef kare süresi ____ ms'dir.

Cevabı göster

60 FPS için hedef kare süresi 16 ms'dir.

Perf Monitor çubuklarını eşleştir

JS çubuğu

JavaScript thread
UI çubuğu

Native render
16 ms

60 FPS hedefi
Flipper

Derin analiz aracı

Sıradaki ders: React Profiler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler