CodeBlanks Logo Icon CodeBlanks

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.

Başlangıç kodu

App.js
// app.json içine eklenecek bayrak
// showPerfMonitor: ...

export default {
  expo: { name: 'Uygulama' }
};

Örnek çözüm

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

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 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 Doğru cevap
  • Expo'yu kaldırmak

Açıklama: Önce ölçüm yapılır, sonra darboğaza müdahale edilir.

2 Hedef kare süresini yaz

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

Açıklama: 60 FPS = 16 ms kare süresi.

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

Kavram Anlamı
JS çubuğu JavaScript thread
UI çubuğu Native render
16 ms 60 FPS hedefi
Flipper Derin analiz aracı

Uzman bölümündeki tüm dersler