SwiftUI带阴影图片缩略图滚动卡顿的性能优化方案问询

问题现象 #

应用需展示不足100张200px见方的图片缩略图，在2018款iPad Pro上滚动浏览时无法保持流畅，测试发现两个关键规律：

• 将图片替换为彩色矩形后，滚动卡顿完全消失
• 移除图片的阴影效果后，卡顿也会消除
  默认认为50张带阴影的图片应当在该设备性能承载范围内，寻求更低性能消耗的缩略图实现方式。

复现代码 #

struct ContentView: View {
        
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            let gridLayout = [GridItem(.adaptive(minimum: 160))]
            LazyVGrid(columns: gridLayout, spacing: 8) {
                ForEach(0..<50) { index in
                    Image("cookie_200")
                        .resizable()
                        .aspectRatio(1.0, contentMode: .fit)
                        .padding(8)
                        .shadow(radius: 4)
                }
            }
        }
    }
}

卡顿核心原因 #

直接给图片裸加.shadow()修饰符时，SwiftUI会在滚动过程中每帧实时对图片的透明通道做模糊采样计算阴影：图片本身带复杂alpha边缘时，GPU需要逐像素采样计算模糊范围，滚动时所有进入视口的图片都要重复这个计算流程，很容易超出GPU的单帧处理预算导致掉帧。
彩色矩形边缘规则、没有复杂透明通道，阴影计算成本极低，因此不会卡顿；移除阴影后自然也没有这部分计算开销。

优化方案 #

按照性能从高到低排序，可按需选择：

• 独立阴影层（性能最优）
  不要给图片本身加阴影，单独在图片下层放置一个和图片整体尺寸一致的实色形状，把阴影加在这个形状上。图片完全不参与阴影计算，性能和纯彩色矩形场景一致，同时渲染上百张也不会掉帧：

  ForEach(0..<50) { index in
      ZStack {
          // 阴影承载层，尺寸和图片+padding整体一致
          RoundedRectangle(cornerRadius: 0)
              .fill(.white) // 填充和页面背景一致的实色
              .shadow(radius: 4)
          Image("cookie_200")
              .resizable()
              .aspectRatio(1.0, contentMode: .fit)
              .padding(8)
      }
  }
  

• 合并渲染层降低阴影计算量
  如果需要阴影贴合图片的不规则轮廓，可以先给图片加实色背景，再通过compositingGroup把整个图片块合并成单一不透明渲染层后再加阴影，避免系统逐像素识别图片透明边计算阴影：

  Image("cookie_200")
      .resizable()
      .aspectRatio(1.0, contentMode: .fit)
      .padding(8)
      .background(.white)
      .compositingGroup() // 合并层，让阴影只按整体外轮廓计算
      .shadow(radius: 4)
  

• 栅格化缓存渲染结果
  如果图片本身是不规则形状需要贴合轮廓阴影，可以在阴影后加drawingGroup修饰符，让系统提前把带阴影的内容栅格化成位图缓存，滚动时直接复用缓存结果，不用每帧重算阴影：

  Image("cookie_200")
      .resizable()
      .aspectRatio(1.0, contentMode: .fit)
      .padding(8)
      .shadow(radius: 4)
      .drawingGroup() // 栅格化缓存
  

  注意这个方案会额外占用显存缓存位图，如果图片数量极多（>200张）不建议使用，避免显存压力过大。

额外优化建议 #

• 如果缩略图不需要透明效果，把图片资源导出为不带alpha通道的JPG格式，减少透明像素处理开销
• 阴影尽量不要用过高的模糊半径，模糊半径每提升1px，GPU需要采样的像素量会指数级上升

内容的提问来源于stack exchange，提问作者Christian Stevenson