SwiftUI'da Performance Optimizasyonu

1// ❌ Structural Identity sorunu - her toggle'da view tamamen yeniden oluşturulur
2VStack {
3    if showDetails {
4        DetailView() // Bu tamamen YENİ bir view olarak algılanır
5    } else {
6        SummaryView() // Bu da farklı bir view
7    }
8}
9 
10// ✅ Explicit Identity - view korunur, sadece içerik değişir
11VStack {
12    DetailView()
13        .id(item.id) // Aynı id = aynı view
14 
15    // Veya opacity ile geçiş (view korunur)
16    DetailView()
17        .opacity(showDetails ? 1 : 0)
18}

1// ❌ Anti-pattern: Monolitik state - her değişiklik tüm view'ı yeniden çizer
2struct ProductListView: View {
3    @State private var products: [Product] = []
4    @State private var searchText = ""
5    @State private var selectedFilter: Filter = .all
6    @State private var sortOrder: SortOrder = .nameAsc
7    @State private var isGridView = false
8 
9    var body: some View {
10        // searchText değiştiğinde sortOrder, isGridView vs.
11        // hiç kullanılmasa bile body yeniden evaluate edilir!
12        VStack {
13            SearchBar(text: $searchText)
14            FilterBar(filter: $selectedFilter)
15            ProductGrid(products: filteredProducts, isGrid: isGridView)
16        }
17    }
18}
19 
20// ✅ Best Practice: State'leri izole et, alt view'lara dağıt
21struct ProductListView: View {
22    @StateObject private var viewModel = ProductListViewModel()
23 
24    var body: some View {
25        VStack {
26            // Her biri kendi state'ini yönetir
27            SearchBarView(viewModel: viewModel)
28            FilterBarView(viewModel: viewModel)
29            ProductGridView(viewModel: viewModel)
30        }
31    }
32}
33 
34// Her alt view sadece kullandığı state'leri dinler
35struct SearchBarView: View {
36    @ObservedObject var viewModel: ProductListViewModel
37 
38    var body: some View {
39        // Sadece searchText değiştiğinde rebuild olur
40        TextField("Ara...", text: $viewModel.searchText)
41            .textFieldStyle(.roundedBorder)
42            .padding(.horizontal)
43    }
44}

1// ❌ Gereksiz binding - title hiç değişmeyecek ama binding olarak geçiliyor
2struct ItemRow: View {
3    @Binding var title: String
4    @Binding var isSelected: Bool
5 
6    var body: some View { ... }
7}
8 
9// ✅ Sadece değişecek olanı binding yap
10struct ItemRow: View {
11    let title: String          // Değişmeyecek = let
12    @Binding var isSelected: Bool  // Değişecek = @Binding
13 
14    var body: some View { ... }
15}

1// ❌ ESKİ: ObservableObject - name değişince age kullanan view'lar da rebuild olur
2class UserProfile: ObservableObject {
3    @Published var name: String = ""
4    @Published var age: Int = 0
5    @Published var avatar: URL?
6    @Published var bio: String = ""
7}
8 
9// ✅ YENİ: @Observable - sadece erişilen property değişince rebuild
10@Observable
11class UserProfile {
12    var name: String = ""
13    var age: Int = 0
14    var avatar: URL?
15    var bio: String = ""
16}
17 
18// View'da kullanım - otomatik fine-grained tracking
19struct NameView: View {
20    let profile: UserProfile
21 
22    var body: some View {
23        // Sadece name erişildiği için, sadece name değişince rebuild olur
24        // age, avatar, bio değişse bile bu view ETKİLENMEZ!
25        Text(profile.name)
26            .font(.title)
27    }
28}

1// ❌ Performans katili - 10.000 öğe aynı anda oluşturulur
2ScrollView {
3    VStack {
4        ForEach(items) { item in
5            ItemRow(item: item)
6        }
7    }
8}
9 
10// ✅ Temel lazy loading - görünür öğeler render edilir
11ScrollView {
12    LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
13        ForEach(items) { item in
14            ItemRow(item: item)
15                .onAppear { prefetchIfNeeded(item) }
16        }
17    }
18}
19 
20// ✅✅ Advanced: Pagination + prefetch
21struct PaginatedListView: View {
22    @StateObject private var viewModel = PaginatedViewModel()
23 
24    var body: some View {
25        List {
26            ForEach(viewModel.items) { item in
27                ItemRow(item: item)
28                    .onAppear {
29                        // Son 5 öğeye gelince yeni sayfa yükle
30                        if viewModel.shouldLoadMore(currentItem: item) {
31                            Task { await viewModel.loadNextPage() }
32                        }
33                    }
34            }
35 
36            if viewModel.isLoading {
37                ProgressView()
38                    .frame(maxWidth: .infinity)
39            }
40        }
41        .task { await viewModel.loadInitialData() }
42    }
43}

1// ✅ Equatable ile gereksiz rebuild'leri önle
2struct ProductCard: View, Equatable {
3    let product: Product
4    let isHighlighted: Bool
5 
6    // Sadece önemli alanları karşılaştır
7    static func == (lhs: ProductCard, rhs: ProductCard) -> Bool {
8        lhs.product.id == rhs.product.id &&
9        lhs.product.name == rhs.product.name &&
10        lhs.product.price == rhs.product.price &&
11        lhs.isHighlighted == rhs.isHighlighted
12        // product.description değişse bile rebuild olmaz!
13    }
14 
15    var body: some View {
16        VStack(alignment: .leading, spacing: 8) {
17            Text(product.name).font(.headline)
18            Text("\(product.price) ₺").font(.subheadline)
19        }
20        .padding()
21        .background(isHighlighted ? Color.yellow.opacity(0.2) : Color.clear)
22    }
23}
24 
25// Parent'da kullanım
26ForEach(products) { product in
27    ProductCard(
28        product: product,
29        isHighlighted: product.id == selectedId
30    )
31    .equatable() // Bu modifier Equatable karşılaştırmasını aktif eder
32}

1// ❌ Memory killer - büyük görseli tam boyutuyla yükler
2Image("hero-banner")
3    .resizable()
4    .frame(width: 300, height: 200)
5// 4000x3000 piksel görsel → 48MB memory!
6 
7// ✅ Downsampled loading - sadece gereken boyutta yükle
8func downsampledImage(url: URL, pointSize: CGSize, scale: CGFloat) -> UIImage? {
9    let maxDimensionInPixels = max(pointSize.width, pointSize.height) * scale
10    let imageSourceOptions = [kCGImageSourceShouldCache: false] as CFDictionary
11 
12    guard let imageSource = CGImageSourceCreateWithURL(url as CFURL, imageSourceOptions) else {
13        return nil
14    }
15 
16    let downsampleOptions = [
17        kCGImageSourceCreateThumbnailFromImageAlways: true,
18        kCGImageSourceShouldCacheImmediately: true,
19        kCGImageSourceCreateThumbnailWithTransform: true,
20        kCGImageSourceThumbnailMaxPixelSize: maxDimensionInPixels
21    ] as CFDictionary
22 
23    guard let downsampledImage = CGImageSourceCreateThumbnailAtIndex(imageSource, 0, downsampleOptions) else {
24        return nil
25    }
26 
27    return UIImage(cgImage: downsampledImage)
28}
29// 300x200 görsel → sadece 240KB memory!

1// ✅ Production-ready async image loading
2struct SmartAsyncImage: View {
3    let url: URL
4    let size: CGSize
5 
6    var body: some View {
7        AsyncImage(url: url, transaction: Transaction(animation: .easeIn)) { phase in
8            switch phase {
9            case .empty:
10                Rectangle()
11                    .fill(Color.gray.opacity(0.2))
12                    .overlay(ProgressView())
13            case .success(let image):
14                image
15                    .resizable()
16                    .aspectRatio(contentMode: .fill)
17                    .transition(.opacity)
18            case .failure:
19                Image(systemName: "photo")
20                    .foregroundStyle(.secondary)
21            @unknown default:
22                EmptyView()
23            }
24        }
25        .frame(width: size.width, height: size.height)
26        .clipped()
27    }
28}

1// ❌ CPU-intensive animation - her frame'de layout recalc
2withAnimation(.easeInOut(duration: 0.5)) {
3    cardWidth = isExpanded ? 350 : 200
4    cardHeight = isExpanded ? 500 : 300
5    cornerRadius = isExpanded ? 20 : 12
6}
7 
8// ✅ GPU-friendly animation - sadece transform ve opacity
9struct ExpandableCard: View {
10    @State private var isExpanded = false
11 
12    var body: some View {
13        CardContent()
14            .scaleEffect(isExpanded ? 1.2 : 1.0)
15            .opacity(isExpanded ? 1.0 : 0.8)
16            .animation(.spring(response: 0.4, dampingFraction: 0.7), value: isExpanded)
17            .onTapGesture { isExpanded.toggle() }
18    }
19}
20 
21// ✅ Transaction ile fine-grained animation kontrolü
22Button("Toggle") {
23    var transaction = Transaction(animation: .easeInOut(duration: 0.3))
24    transaction.disablesAnimations = false
25 
26    withTransaction(transaction) {
27        isVisible.toggle()
28    }
29}

1// ❌ Yavaş - her gradient layer ayrı ayrı render edilir
2ZStack {
3    ForEach(0..<50) { i in
4        Circle()
5            .fill(
6                RadialGradient(
7                    colors: [.blue, .purple, .clear],
8                    center: .center,
9                    startRadius: 0,
10                    endRadius: CGFloat(i) * 10
11                )
12            )
13            .frame(width: CGFloat(i) * 20, height: CGFloat(i) * 20)
14    }
15}
16 
17// ✅ Hızlı - Metal texture'a flatten edilir
18ZStack {
19    ForEach(0..<50) { i in
20        Circle()
21            .fill(
22                RadialGradient(
23                    colors: [.blue, .purple, .clear],
24                    center: .center,
25                    startRadius: 0,
26                    endRadius: CGFloat(i) * 10
27                )
28            )
29            .frame(width: CGFloat(i) * 20, height: CGFloat(i) * 20)
30    }
31}
32.drawingGroup() // Rendering süresini %80 düşürür!
33 
34// ✅✅ Canvas API - en yüksek performans (sadece 1 view!)
35Canvas { context, size in
36    for i in 0..<50 {
37        let rect = CGRect(
38            x: size.width/2 - CGFloat(i)*10,
39            y: size.height/2 - CGFloat(i)*10,
40            width: CGFloat(i)*20,
41            height: CGFloat(i)*20
42        )
43        context.fill(
44            Path(ellipseIn: rect),
45            with: .linearGradient(
46                Gradient(colors: [.blue, .purple]),
47                startPoint: rect.origin,
48                endPoint: CGPoint(x: rect.maxX, y: rect.maxY)
49            )
50        )
51    }
52}
53.frame(width: 500, height: 500)

1// Debug: View body evaluation sayısını ölç
2struct MonitoredView: View {
3    let item: Item
4 
5    var body: some View {
6        let _ = Self._printChanges() // Debug build'de hangi property değişti gösterir
7 
8        VStack {
9            Text(item.title)
10            Text(item.subtitle)
11        }
12    }
13}
14 
15// signpost ile custom performance ölçümü
16import os
17 
18let performanceLog = OSSignposter(subsystem: "com.myapp", category: "Performance")
19 
20func loadData() async {
21    let state = performanceLog.beginInterval("DataLoad")
22    defer { performanceLog.endInterval("DataLoad", state) }
23 
24    // Instruments'da "DataLoad" interval'ı görünür
25    let data = try? await fetchFromAPI()
26}