SwiftUI条件渲染大字符串Text视图的性能问题优化

核心问题分析 #

切换isExpanded时，SwiftUI会同步渲染超长的logItem.responseBody，Text视图需要一次性计算整个字符串的排版布局（换行、字符定位等），直接阻塞主线程导致延迟。

优化方案 #

1. 用UIKit的UITextView封装高效文本视图 #

UIKit的UITextView对大文本的渲染性能远优于SwiftUI原生Text，它支持异步布局和按需渲染。我们可以用UIViewRepresentable封装一个自定义视图：

struct LazyLargeTextView: UIViewRepresentable {
    let text: String
    
    func makeUIView(context: Context) -> UITextView {
        let textView = UITextView()
        textView.isEditable = false
        textView.isScrollEnabled = true
        textView.font = UIFont.monospacedSystemFont(ofSize: 14, weight: .regular)
        // 开启非连续布局，提升大文本渲染效率
        textView.layoutManager.allowsNonContiguousLayout = true
        return textView
    }
    
    func updateUIView(_ uiView: UITextView, context: Context) {
        // 仅在文本变化时更新，避免重复计算布局
        if uiView.text != text {
            uiView.text = text
        }
    }
}

替换LogItem中的原生Text：

if self.isExpanded {
    LazyLargeTextView(text: logItem.responseBody)
        .frame(height: 300) // 固定高度，避免无限拉伸导致的全量渲染
        .cornerRadius(8)
        .padding(.vertical, 4)
}

2. 异步预加载并处理文本 #

如果文本需要格式化（比如JSON美化），在后台线程完成处理，避免主线程阻塞：

struct LogItem: View {
    var logItem: NetworkLogEntry
    @State var isExpanded: Bool = false
    @State private var processedResponseBody: String?
    
    var body: some View {
        VStack {
            HStack {
                Text(logItem.timestamp.formatted())
                Spacer()
                Button {
                    isExpanded.toggle()
                    // 展开时才异步处理文本
                    if isExpanded, processedResponseBody == nil {
                        Task {
                            let formattedText = formatLargeText(logItem.responseBody)
                            await MainActor.run {
                                processedResponseBody = formattedText
                            }
                        }
                    }
                } label: {
                    Text("toggle visibility")
                }
            }
            if isExpanded {
                if let processedText = processedResponseBody {
                    LazyLargeTextView(text: processedText)
                        .frame(height: 300)
                } else {
                    ProgressView() // 显示加载状态
                }
            }
        }
    }
    
    // 示例：后台格式化JSON文本
    private func formatLargeText(_ rawText: String) -> String {
        guard let data = rawText.data(using: .utf8),
              let jsonObject = try? JSONSerialization.jsonObject(with: data),
              let prettyData = try? JSONSerialization.data(withJSONObject: jsonObject, options: .prettyPrinted) else {
            return rawText
        }
        return String(data: prettyData, encoding: .utf8) ?? rawText
    }
}

3. 优化列表渲染性能 #

原代码中使用logs.indices.reversed()作为ForEach数据源，建议直接反转数组并使用更可靠的标识（如果NetworkLogEntry有唯一ID，优先用id: \.id）：

ForEach(logs.reversed(), id: \.self) { log in
    LogItem(logItem: log)
}

这能让LazyVStack更高效地复用视图，减少不必要的视图重建。

内容的提问来源于stack exchange，提问作者Jake Loew