Flutter image pipeline optimizasyonu: decode, resize ve GPU upload rehberi

Neden image decode ve GPU upload kritik - mekanizma ve ölçüm

Resimlerin UI jank üretmesinin temel sebebi genellikle iki aşamalı: CPU-side decode ve GPU-side texture upload. CPU decode, Dart/engine iş parçacıklarında zaman alır; GPU upload ise raster thread gecikmesi yaratır. Profilleme için somut araç olarak Flutter DevTools Performance ve komut tabanlı izleme ile başlayın: uygulamayı "flutter run --profile --trace-skia" ile çalıştırın ve DevTools'ta 30 saniyelik bir kayıt alarak "Raster" ve "GPU thread" metriklerini toplayın.

Karşılaştırma mantığı: 1) Baseline kaydı: orijinal uygulamayı 30s profil kaydı ile ölçün; 2) Optimizasyonu uygulayın (aşağıdaki kod değişiklikleri gibi); 3) Tekrar 30s profil kaydı alın. DevTools'taki Frame Charts'tan median raster time ve 90. persentil frame süresini karşılaştırın. DevTools'tan dışarı aktarılan trace JSON'ini chrome://tracing/ veya Perfetto ile açabilirsiniz; örneğin trace.json'i açıp ilgili 'Raster' event'lerini filtreleyin.

Hızlı kazanç: decode'ı hedef boyutta yapmak (instantiateImageCodec ve cacheWidth)

Flutter engine'in instantiateImageCodec API'si ile decode sırasında hedef piksel boyutunu belirtmek mümkün; bu, hem CPU iş yükünü hem de GPU upload byte sayısını doğrudan azaltır. Örnek kod:

import 'dart:ui' as ui;

Future decodeAtSize(Uint8List bytes, int targetWidth) async {
  final ui.Codec codec = await ui.instantiateImageCodec(bytes, targetWidth: targetWidth);
  final ui.FrameInfo fi = await codec.getNextFrame();
  return fi.image; // Do not call toByteData() unless needed
}

Bu yaklaşımın teknik gerekçesi: engine native seviyede resim decoder'ını kullanarak doğrudan istenen çözünürlükte bitmap üretebilir; böylece gereksiz büyük bitmapler heap'e alınmaz ve GPU transfer süresi kısalır.

Ayrıca NetworkImage / Image.network kullanırken, framework'ün desteklediği cacheWidth/cacheHeight parametresini kullanmak genelde en az kod değişikliğiyle büyük kazanç sağlar:

Image.network(url, width: 200, height: 100, cacheWidth: (200 * devicePixelRatio).round());

Burada devicePixelRatio hesaplamasını unutmayın; aksi halde düşük çözünürlükte veya bulanık görüntüler elde edebilirsiniz.

Isolate vs engine-side decode: kopyalama maliyetleri ve ne zaman compute kullanmalı

Teoride Dart isolate'a raw bytes kopyalayıp orada paket:image gibi bir kütüphane ile decode etmek CPU yükünü ana izoletten alır. Ancak büyük Uint8List'lerin isolate'a kopyalanması da maliyetlidir: platformlar arası veri transferi ve GC yükü artar. Bu yüzden genel kural: mümkünse engine tarafı decode (instantiateImageCodec veya ImageProvider cacheWidth) kullanın; özel işlem gerekiyorsa compute/isolate kullanın.

compute kullanımına örnek: sunucudan özel bir PNG parselama veya metadata işleme yapıyorsanız:

import 'package:flutter/foundation.dart';

Future preprocess(Uint8List bytes) async {
  return await compute(_heavyPngResize, bytes);
}

Uint8List _heavyPngResize(Uint8List bytes) {
  // package:image ile işlem yapın
  // return resized bytes
}

Burada dikkat: compute ile verilen Uint8List kopyalanır; büyük resimler için latency ölçün. Profilleme için DevTools CPU profiler'ı kullanın ve isolate GC/transfer gecikmesini tespit edin.

Cache ve memory budget: PaintingBinding imageCache ayarları ve evict stratejileri

Flutter uygulamanızda belleği yönetmenin somut yolu PaintingBinding.instance.imageCache parametrelerini ayarlamaktır. Örnek:

import 'package:flutter/painting.dart';

void tweakImageCache() {
  final cache = PaintingBinding.instance.imageCache;
  cache.maximumSize = 100; // en fazla 100 resim
  cache.maximumSizeBytes = 100 << 20; // ~100 MB
}

Bunun etkisini görmek için önce dev ortamında varsayılan ile kaydedin, sonra yukarıdaki değerleri uygulayıp DevTools Memory tab'ından heap usage ve raster cache kullanımlarını karşılaştırın.

Spesifik evict senaryosu: büyük bir galeri ekranından çıkarken belirli bir URL'nin cache'den kaldırılması için:

await NetworkImage(url).evict();
PaintingBinding.instance.imageCache.clearLiveImages();

Bu, arka planda gereksiz texture'ların tutulmasını engeller ve düşük bellekli cihazlarda OOM riskini azaltır.

Edge case'ler, animasyonlu formatlar ve platform farkları - GIF, WebP, ve DPR hataları

Animasyonlu GIF/WebP'lerde instantiateImageCodec ile frame yönetimi gerekir. Örneğin sadece ilk frame'i göstermek istiyorsanız codec.getNextFrame() kullanın; sürekli oynatım için frame sürelerini dikkate alarak zamanlama yapmalısınız. Kod örneği:

final ui.Codec codec = await ui.instantiateImageCodec(bytes);
final ui.FrameInfo first = await codec.getNextFrame();
final ui.Image image = first.image; // only first frame
// For playing: await codec.getNextFrame() in a loop with timing

Cihaz pixel ratio hatası sık rastlanan sorunlardan biridir: cacheWidth/cacheHeight değerlerini logical px yerine fiziksel px cinsinden vermezseniz cihazda bulanık ya da aşırı büyük bitmaps oluşur. Hesaplama örneği:

final dpr = MediaQuery.of(context).devicePixelRatio;
final cacheW = (logicalWidth * dpr).round();

Profilleme sırasında iOS ve Android arasındaki decode davranışı farklı olabilir; mutlaka her iki platformta "flutter run --profile --trace-skia" ile test edin.

Uygulamalı performans testi adımları ve örnek ölçüm workflow'u

Somut workflow: 1) Baseline: "flutter run --profile --trace-skia" ile uygulamayı başlatın; DevTools Performance'ta 30s kayıt alın ve export edin. 2) Değişiklik: Image.network -> cacheWidth veya instantiateImageCodec ile targetWidth uygulayın (kod örnekleri yukarıda). 3) Tekrar profil kaydı alın. 4) DevTools'ta Frame Chart'tan median raster time, build time ve GPU thread time'ı karşılaştırın. CLI komut örneği:

flutter run --profile --trace-skia
# DevTools'ta kaydı başlat/stop, Export trace -> open in chrome://tracing/

Trace analizi için hızlı jq komutu örneği (trace.json export edildikten sonra):

cat trace.json | jq '[.traceEvents[] | select(.name=="Rasterize") | .dur] | {count: length, avg: (add/length)}'

Event isimleri engine versiyonuna göre değişebilir; eğer Rasterize bulunmazsa DevTools'taki 'Raster' event isimlerini trace.json'dan kontrol edin. Bu adım size objektif bir once-sonra karşılaştırması sağlayacaktır.

Sık Sorulan Sorular

flutter eğitimi alırken resim operasyonlarını nasıl profile etmeliyim?

Profil için somut araç Flutter DevTools Performance ve komut satırından "flutter run --profile --trace-skia" kullanmaktır. 30s kayıt alıp DevTools Frame Chart'taki raster ve build sürelerini karşılaştırın; daha detaylı analiz için trace.json'i export edip chrome://tracing/ veya Perfetto ile açabilirsiniz.

flutter kursu kapsamında hangi tekniklerle image memory footprint azaltılır?

En etkili teknikler: instantiateImageCodec ile hedef çözünürlükte decode, Image.network ile cacheWidth/cacheHeight kullanımı, PaintingBinding.instance.imageCache.maximumSizeBytes ayarı ve gereksiz texture'ları evict etmek (NetworkImage(url).evict()). Bu adımların her biri DevTools Memory ve Performance ile ölçülmelidir.

dart programlama eğitimi sırasında isolate kullanımı resim işleri için ne zaman uygundur?

Isolate veya compute, Dart tarafında yoğun CPU işlemi gerektiren özel format dönüşümleri için uygundur (ör. paket:image ile kompleks işleme). Ancak büyük Uint8List transferi kopyalama maliyeti getirdiği için, engine-side decode (instantiateImageCodec veya cacheWidth) mümkünse önce onu tercih edin. Performans farkını görmek için CPU profiler ve isolate GC metriklerini izleyin.

flutter state management ile image cache yönetimi nasıl entegre edilir?

State management (Provider, Riverpod vb.) içinde resim durumunu tutarken büyük bitmap referanslarını doğrudan saklamayın; bunun yerine URL / key saklayıp gerektiğinde NetworkImage(...).evict() veya PaintingBinding.instance.imageCache.clearLiveImages() çağrısı yapın. Bu, bellek sızıntılarını ve OOM riskini azaltır.