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
Buildblogu: 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:
constconstructor kullanımı- State'i alt agaca mümkün oldugunca yakın taşıma
Selector,BlocSelectorile dar dinlemeRepaintBoundaryile paint izolasyonuListView.builderile 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
Opacitywidget'i yerineColoredBoxveya 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.