TB
← Tüm yazılar

Performans profiling

Flutter DevTools, timeline analizi ve rebuild optimizasyonu ile performans darbogazlarini tespit etme yontemlerini anlatir.

Flutter uygulamalarinda performans sorunlari çoğu zaman geliştirme modunda gizlenir; profile ve release modda farklı davranislar ortaya cikar. Performans profiling, UI thread'deki frame suresi, GPU yuku, bellek tuketimi ve gereksiz rebuild'leri olculerek darbogazin nerede oldugunu gösterir. Bu makale Flutter ekosistemindeki profiling araclarini ve pratik optimizasyon adimlarini sistematik şekilde ele alir.

Profile mod ve ölçüm disiplini

Performans olcumleri icin flutter run --profile veya profile modda derlenmis build kullanılmalıdır. Debug modda assert'ler ve ek kontroller frame suresini bozar; release modda ise profiling araclari sinirlidir. Profile mod, JIT optimizasyonlari olmadan gercege yakın sonuç verir ve DevTools baglantisina izin verir.

Tek bir düşük FPS anini degil, tekrarlanabilir senaryoyu olcmek gerekir: liste scroll, sayfa gecisi, ilk acilis, büyük JSON parse. Her senaryo oncesi uygulamayi sicak duruma getirmek veya cold start icin process'i yeniden baslatmak metrikleri anlamlandirir.

Flutter DevTools Timeline

DevTools Timeline sekmesi UI ve raster thread'deki frame'leri gösterir. 16 ms (60 fps) veya 8 ms (120 fps) esigini asan frame'ler kirmizi isaretlenir. Frame secildiginde hangi widget build, layout ve paint asamalarinin ne kadar surdugu gorulur.

Timeline'da sik aranan ipuclari:

  • Uzun Build blogu: gereksiz rebuild veya agir build metodu
  • Uzun Layout: derin widget agaci veya intrinsic olculer
  • Uzun Paint: opacity, clip, backdrop filter maliyeti
  • Raster thread jank: büyük görseller ve shader compile

Performance Overlay

MaterialApp(showPerformanceOverlay: true) veya debug menu ile ekranda UI ve GPU grafikleri gosterilir. Hızlı smoke test icin faydalidir; detayli analiz icin DevTools tercih edilir.

Rebuild analizi

Flutter'da performansin büyük kismi "ne kadar sik ve ne kadar geniş alanda rebuild yaptiginizla" ilgilidir. debugPrintRebuildDirtyWidgets debug modda hangi widget'larin yeniden cizildigini loglar. Daha gelismis analiz icin custom debugProfileBuildsEnabled ve DevTools CPU profiler birlestirilir.

Optimizasyon kalıplari:

  1. const constructor kullanımı
  2. State'i alt agaca mümkün oldugunca yakın taşıma
  3. Selector, BlocSelector ile dar dinleme
  4. RepaintBoundary ile paint izolasyonu
  5. ListView.builder ile lazy liste

Liste ve scroll performansi

Büyük listelerde ListView(children: [...]) tüm elemanlari ayni anda oluşturur; bu OOM ve jank üretir. ListView.builder veya SliverList yalnizca görünür elemanlari insa eder. itemExtent veya prototypeItem ile sabit yukseklik vermek layout hesaplamasini hizlandirir.

ListView.builder(
  itemCount: items.length,
  itemExtent: 72,
  itemBuilder: (context, index) => TaskTile(task: items[index]),
)

AutomaticKeepAliveClientMixin yalnizca gercekten gerekli tab'larda kullanılmalı; aksi halde bellekte gereksiz state tutulur.

Görsel ve shader maliyeti

Büyük cozunurluklu görseller decode maliyeti yüksektir. cacheWidth ve cacheHeight ile bellekte tutulacak boyutu sinirlayin. SVG ve vektor asset'ler olceklendirmede avantajli olabilir. Ilk kez kullanilan shader'lar derleme nedeniyle kisa jank yaratabilir; Flutter'in shader warm-up stratejileri ve asset on yükleme bu etkiyi azaltir.

Bellek profiling

DevTools Memory sekmesi heap snapshot ve allocation timeline sunar. Sizinti suphesinde ayni ekrana gidip gelerek heap buyumesini karsilastirin. Image cache, stream subscription ve global cache map'ler sik sizinti kaynaklaridir. dispose icinde controller, focus node ve animation controller kapatmayi unutmayin.

CPU profiler ve is mantigi

Agir JSON parse, sik filtreleme veya büyük list transform islemleri UI thread'i bloklar. Bu isleri compute veya Isolate.run ile arka isolate'e tasiyin. Profiler'da jsonDecode, regex ve custom sort fonksiyonlari ust siralarda gorunuyorsa aday nettir.

final parsed = await compute(_parsePayload, rawJson);

List<Item> _parsePayload(String source) {
  final list = jsonDecode(source) as List;
  return list.map(Item.fromJson).toList();
}

Network ve ilk acilis

Ilk frame suresini API beklemesi uzatir. Splash sirasinda paralel init, lazy route loading ve öncelikli veri onbellekleme ilk acilisi iyilestirir. firebase_performance veya custom trace ile "time to interactive" olculmelidir.

Platform channel maliyeti

Sik native çağrı yapan platform channel kodu serialize/deserialize maliyeti üretir. Batch API tasarımı veya tek seferde daha büyük payload gondermek channel trafigini azaltir. Method channel yerine FFI kritik yollarda dusunulebilir; ancak karmasiklik artar.

Release mod dogrulamasi

Profile modda duzeltilen sorun release'de de dogrulanmali. flutter build apk --release veya --split-per-abi ile gerçek cihazda scroll ve animasyon testi yapin. Systrace (Android) ve Instruments (iOS) native katman sarkmalarini yakalar.

Performans butcesi ve regresyon

Ekip icinde performans butcesi tanimlayin: örneğin ana liste scroll'da p95 frame suresi 16 ms alti, cold start 2 saniye alti. CI'da tam profiling zor olsa da kritik widget icin micro-benchmark veya integration test timeline assert eklenebilir. Regresyon PR'da erken yakalanir.

Yaygın anti-pattern'ler

  • Root'ta devasa setState
  • Her build'de yeni closure veya map oluşturma
  • Opacity widget'i yerine ColoredBox veya fade icin optimize yöntem
  • Intrinsic height icinde büyük liste
  • Global MediaQuery.of(context) dinleyerek tüm agaci rebuild

Impeller ve rendering pipeline

Flutter'in yeni Impeller render motoru, özellikle iOS'ta shader compile jank'ini azaltmayi hedefler. Profiling yaparken kullandiginiz renderer'i not edin; Skia ve Impeller arasinda paint maliyeti farklı olabilir. Görsel efekt agir ekranlarda her iki backend ile de kisa regression testi yapmak, surpriz performans dususlerini erken yakalar.

Build size ve startup etkisi

Performans yalnizca runtime FPS degildir. flutter build apk --analyze-size ile hangi asset ve paketlerin binary'yi sislirdigini gorebilirsiniz. Kullanılmayan font ve asset'leri temizlemek, deferred import ile nadir modulleri gec yuklemek ilk acilis suresini iyilestirir. Tree shaking ve obfuscation boyutu dusururken debug sembollerini ayri arsivlemeyi unutmayin.

Network ve cache katmanı

HTTP cache header'lari ve yerel disk cache birlikte kullanıldığında tekrarlayan istekler azalir. Profiling sirasinda Dio veya http client interceptor loglari ile yavas endpoint'leri tespit edin. Görsel agir ekranlarda precacheImage ve cacheWidth ayarlari bellek ile hiz arasinda denge kurar.

Özet

Flutter performans profiling; profile modda ölçüm, DevTools Timeline ile frame analizi, rebuild ve bellek optimizasyonu ve release dogrulamasindan olusan tekrarlanabilir bir dongudur. Sorunu once olc, sonra en geniş etkili darbogazi hedefle, degisikligi ayni senaryoda yeniden profile et. Bu disiplin, kullanıcının hissettigi akicligi sistematik şekilde korur.

Impeller ve Skia backend farklari profiling sonuclarini etkileyebilir; hedeflediginiz platform varsayilan renderer ile ölçüm yapin. iOS'ta Impeller varsayilan oldugunda eski Skia optimizasyonlari birebir tasinmaz.

Widget rebuild sayisini azaltmak icin ValueNotifier ile sadece ilgili alt agaci ListenableBuilder ile sarın. Tüm sayfayi Provider watch etmek yerine selector pattern performans kazanci sağlar.

DevTools'ta 'Track widget rebuilds' secenegi acikken etkilesimli olarak hangi widget'in neden tetiklendigini gorebilirsiniz. Bu mod kisa sureli analiz icin idealdir.

Performans iyilestirmesi yapmadan once kullanıcı senaryosunun gercekten yavas oldugunu dogrulayin. Premature optimization, okunabilir kodu gereksiz karmasiklastirir.

Frame timing grafiklerini ekip wiki'sine ekleyerek referans deger olusturun; boylece yeni gelen geliştiriciler hangi ekranin hedef FPS altinda kaldigini hizla anlar.

Agir animasyon ve liste ayni ekranda birlesiyorsa once animasyonu profile edin, sonra listeyi; darbogazin hangi katmanda oldugunu karistirmamak icin adim adim ilerleyin.

Custom paint ve canvas cizimlerinde repaint sinirini daraltmak icin CustomPainter shouldRepaint metodunu bilincli implement edin; gereksiz true donusu GPU yukunu artirir.