SwiftUI优化咨询：多图片视图的性能提升方案

问题场景 #

开发的SwiftUI视图结构如下：主容器为分页样式的TabView，每个页面嵌套VStack，内部包含多个SubView；每个SubView包含约10张256×256像素的图片。切换主TabView页面时出现轻微卡顿，移除图片后流畅度明显提升，推测卡顿由图片渲染导致。需求是实现类似AsyncImage的后台线程图片渲染能力，并获取其他性能优化方法。

最小可复现代码 #

MainView

struct MainView: View {
 
 @EnvironmentObject var viewModel: ViewModel
 
 var body: some View {
     TabView {
         ForEach(0..<5) { i in
             VStack {
                 ForEach(0..<5) { j in
                     SubView(model: viewModel.models[j])
                 }
             }
         }
     }
     .tabViewStyle(.page)
 }
}

SubView

struct SubView: View {
 
 var model: Model
 
 var body: some View {
     VStack(spacing: 0) {
         HStack {
             Image(uiImage: model.image)
                 .renderingMode(.original)
                 .resizable()
                 .aspectRatio(contentMode: .fill)
                 .frame(width: 70, height: 70)
                 .clipShape(Circle())
                 .shadow(color: .gray, radius: 1, x: 0, y: 1)
             
             VStack {
                 Text(model.name)
                     .fontWeight(.bold)
                     .multilineTextAlignment(.leading)
                     .lineLimit(2)
                     .minimumScaleFactor(0.5)
             }
         }
         .frame(height: 70)
         
         HStack {
             GeometryReader { geometry in
                 TabView {
                     ForEach(0..<model.smallImages.count, id: \.self){i in
                         HStack {
                             Image(uiImage: model.smallImages[i])
                                 .renderingMode(.original)
                                 .resizable()
                                 .aspectRatio(contentMode: .fill)
                                 .frame(width: 40, height: 40)
                                 .background(.white)
                                 .clipShape(Circle())
                             
                             Text("Some short text")
                                 .scaledToFit()
                                 .minimumScaleFactor(0.01)
                                 .lineLimit(2)
                                 .frame(width: max(geometry.size.width - 60, 0), alignment: .leading)
                         }
                     }
                 }
                 .tabViewStyle(.page(indexDisplayMode: .never))
             }
         }
         .frame(height: 40)
     }
 }
}

Model

struct Model: Identifiable, Equatable {
    let id = UUID()
    let image: UIImage?
    let name: String
    let smallImages: [UIImage?] 
    let smallNames: [String] 
    let backgroundColor: Color
    let foregroundColor: Color
}

优化方案 #

一、后台线程预处理图片（模拟AsyncImage逻辑） #

AsyncImage的核心是在后台完成图片解码、缩放等操作，避免阻塞主线程。对于本地UIImage，我们可以提前在后台完成适配视图尺寸的预处理，而非在渲染时实时计算。

1. 修改Model结构，增加预处理后的图片属性：

struct Model: Identifiable, Equatable {
    let id = UUID()
    let originalImage: UIImage?
    let processedImage: UIImage? // 适配70x70的主图
    let name: String
    let originalSmallImages: [UIImage?]
    let processedSmallImages: [UIImage?] // 适配40x40的缩略图
    let smallNames: [String]
    let backgroundColor: Color
    let foregroundColor: Color
}

2. 在ViewModel中用后台队列处理图片：

class ViewModel: ObservableObject {
    @Published var models: [Model] = []
    
    func loadModels() {
        // 用userInitiated优先级队列，保证处理速度且不阻塞主线程
        DispatchQueue.global(qos: .userInitiated).async {
            // 替换为你的原始图片加载逻辑
            let rawModels = self.getRawModels()
            
            let processedModels = rawModels.map { raw in
                // 预处理主图到目标尺寸
                let processedMainImage = raw.image?.preprocess(to: CGSize(width: 70, height: 70))
                // 批量预处理缩略图
                let processedThumbnails = raw.smallImages.map { $0?.preprocess(to: CGSize(width: 40, height: 40)) }
                
                return Model(
                    originalImage: raw.image,
                    processedImage: processedMainImage,
                    name: raw.name,
                    originalSmallImages: raw.smallImages,
                    processedSmallImages: processedThumbnails,
                    smallNames: raw.smallNames,
                    backgroundColor: raw.backgroundColor,
                    foregroundColor: raw.foregroundColor
                )
            }
            
            // 切回主线程更新UI
            DispatchQueue.main.async {
                self.models = processedModels
            }
        }
    }
    
    // 模拟原始数据加载
    private func getRawModels() -> [Model] {
        // 这里替换成你的实际数据获取逻辑
        return []
    }
}

// UIImage扩展：后台预处理图片
extension UIImage {
    func preprocess(to targetSize: CGSize) -> UIImage? {
        let format = UIGraphicsImageRendererFormat()
        format.scale = UIScreen.main.scale // 匹配屏幕分辨率，避免模糊
        format.opaque = true // 关闭透明通道，提升渲染性能
        
        let renderer = UIGraphicsImageRenderer(size: targetSize, format: format)
        return renderer.image { context in
            self.draw(in: CGRect(origin: .zero, size: targetSize))
        }
    }
}

3. SubView中直接使用预处理后的图片，避免实时缩放：

// 主图部分
Image(uiImage: model.processedImage)
    .renderingMode(.original)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 70, height: 70)
    .clipShape(Circle())
    .shadow(color: .gray, radius: 1, x: 0, y: 1)

// 缩略图部分
Image(uiImage: model.processedSmallImages[i])
    .renderingMode(.original)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 40, height: 40)
    .background(.white)
    .clipShape(Circle())

二、视图层级与渲染优化 #

1. 替换GeometryReader为轻量布局：SubView中的GeometryReader会触发额外的布局计算，可用frame(maxWidth: .infinity)替代，直接利用父容器宽度：

HStack {
    TabView {
        ForEach(0..<model.processedSmallImages.count, id: \.self){i in
            HStack(spacing: 8) {
                Image(uiImage: model.processedSmallImages[i])
                    .renderingMode(.original)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 40, height: 40)
                    .background(.white)
                    .clipShape(Circle())
                
                Text("Some short text")
                    .scaledToFit()
                    .minimumScaleFactor(0.01)
                    .lineLimit(2)
                    .frame(maxWidth: .infinity, alignment: .leading)
            }
        }
    }
    .tabViewStyle(.page(indexDisplayMode: .never))
}
.frame(height: 40)

2. 用LazyVStack按需加载SubView：将MainView中的VStack替换为LazyVStack，仅当SubView进入可视区域时才创建和渲染，减少初始加载的视图数量：

TabView {
    ForEach(0..<5) { i in
        LazyVStack {
            ForEach(0..<5) { j in
                SubView(model: viewModel.models[j])
            }
        }
    }
}
.tabViewStyle(.page)

3. 简化渲染修饰符：如果非必需，可移除shadow等耗时的渲染效果；或使用更轻量的参数配置，减少GPU计算量。

三、图片缓存与复用 #

1. 复用UIImage实例：确保相同图片只加载和解码一次，可在ViewModel中实现内存缓存，避免重复读取本地资源或文件。
2. 实现本地图片缓存：如果图片来自本地文件系统，可添加磁盘缓存逻辑，避免重复解码大尺寸图片。

四、调试与验证 #

使用Xcode的性能工具定位瓶颈：

• Time Profiler：查看主线程耗时，确认是否为图片渲染阻塞主线程。
• Debug View Hierarchy：检查视图层级，移除不必要的嵌套视图。

内容的提问来源于stack exchange，提问作者Simon Henn