在iOS端运行本地大语言模型时，最令开发者头疼的问题是什么？答案几乎一致：文字输出卡顿、延迟明显、整体用户体验欠佳。本文将深入探讨如何基于阿里巴巴开源的MNN框架，通过三层协同优化策略，让文字输出的流畅度如同人类自然打字一般顺滑。先来看两段视频对比——优化前后的效果差异非常明显，一看便知。

流畅度提升效果十分显著。项目的完整源码地址如下：https://github.com/alibaba/MNN/blob/master/apps/iOS/MNNLLMChat/README.md

▐ 1. 底层流缓冲优化 (OptimizedLlmStreamBuffer)

模型输出与UI更新频率的不匹配，是导致卡顿的首要原因。底层缓冲层要解决的核心问题正在于此——既不能让模型每输出一个字就刷新一次UI，也不能让UI等待过长时间才更新。

• 智能触发机制：基于标点符号与缓冲阈值的双重触发策略，既保障内容完整性，又有效规避频繁刷新。
• 标点符号触发：全面支持中英文Unicode标点符号识别，确保在句子的自然断点处进行刷新。
• 性能优化：采用预分配内存方式，显著减少内存重分配所带来的额外开销。

▐ 2. 中间层更新优化 (UIUpdateOptimizer)

底层输出已趋于平稳，但UI更新请求仍可能出现爆发式增长。中间层的职责正是统一管理这些更新请求，实施批处理与节流控制。

• 双重策略：批量触发（累计满5个更新） + 时间触发（30ms超时），确保每一次刷新都不会被遗漏。
• 线程安全：基于Swift Actor模型实现，并发处理天然具备安全性。
• 智能调度：自动取消重复任务，有效避免不必要的资源消耗。

▐ 3. UI层动画增强 (LLMMessageTextView)

技术层面的优化到位后，用户的实际感知还需依靠最后一层——视觉上的打字机效果，让文字逐个字符呈现，模拟人类的输入节奏。

• 条件化动画：智能判断是否需要启用打字机效果，例如短消息直接完整显示。
• 流式适配：完美匹配流式输出时的文本动态变化，无论是追加内容还是重启动画都能从容应对。
• 资源管理：自动清理动画定时器，有效防止内存泄漏问题。

最终，底层缓冲平滑了模型输出的节奏，中层合并了UI更新请求，UI层则提供了视觉上的缓冲体验——三层紧密配合，从技术实现到用户体验实现了全方位覆盖。

2. 延迟刷新调度

private func scheduleFlush(completion: @escaping (String) -> Void) {
    // 取消之前的调度，避免重复执行
    flushTask?.cancel()

    // 创建新的延迟任务
    flushTask = Task {
        // 等待指定时间间隔
        try? await Task.sleep(nanoseconds: UInt64(flushInterval * 1_000_000_000))

        // 检查任务是否被取消，以及是否有待处理内容
        if !Task.isCancelled && !pendingUpdates.isEmpty {
            flushUpdates(completion: completion)
        }
    }
}

该方案实现了以下功能：

• 节流控制：为UI更新提供了30毫秒的缓冲时间窗口。
• 批处理优化：30毫秒内若产生新的更新请求，则取消当前延迟任务并重新计时。
• 性能平衡：既避免了过于频繁的刷新，又保证了内容能够及时呈现。
• 响应性保障：即使在低频更新场景下，也能确保用户在30毫秒内看到内容。

3. 批处理执行

private func flushUpdates(completion: @escaping (String) -> Void) {
    guard !pendingUpdates.isEmpty else { return }

    // 合并所有待处理的更新
    let batchedContent = pendingUpdates.joined()

    // 清空队列，准备下一轮
    pendingUpdates.removeAll()
    lastFlushTime = Date()

    // 切换到主线程执行UI更新
    Task { @MainActor in
        completion(batchedContent)
    }
}

批处理的优势体现在：

• 减少调用频次：多次UI更新合并为一次执行，有效降低系统开销。
• 提升响应性能：主线程负担减轻，UI流畅度得到显著提升。
• 内存效率：及时清理已处理的内容，避免数据累积。

▐ 3. LLMMessageTextView：沉浸式打字机动画

3.1 背景

LLMMessageTextView的设计目标十分清晰：打造接近于人类打字速度的自然动画效果。通过精细的时间参数控制与智能逻辑判断，让AI的输出不再显得生硬，而是富有节奏感和亲和力。

3.2 类设计

struct LLMMessageTextView: View {
    // 数据模型
    let text: String?                     // 完整文本内容
    let messageUseMarkdown: Bool          // 是否使用Markdown渲染
    let messageId: String                 // 消息唯一标识
    let isAssistantMessage: Bool          // 是否为AI消息
    let isStreamingMessage: Bool          // 是否正在流式传输

    // 动画状态
    @State private var displayedText: String = ""  // 当前显示的文本
    @State private var animationTimer: Timer?      // 动画定时器

    // 动画配置参数
    private let typingSpeed: TimeInterval = 0.015  // 每字符15ms
    private let chunkSize: Int = 1                 // 每次显示1个字符
}

3.3 动画控制策略

1. 条件化动画触发

private var shouldUseTypewriter: Bool {
    // 只对AI助手消息启用动画，且文本长度超过5个字符
    return isAssistantMessage && (text?.count ?? 0) > 5
}

触发逻辑的设计考量：

• 用户体验优先：仅对AI消息启用动画效果，用户消息则直接完整显示。
• 性能权衡：短消息（不超过5个字符）直接呈现，避免不必要的动画开销。
• 场景适配：流式传输时启用动画，静态显示时则关闭动画。

2. 流式文本变化处理

private func handleTextChange(_ newText: String?) {
    guard let newText = newText else {
        displayedText = ""
        stopAnimation()
        return
    }

    if isAssistantMessage && isStreamingMessage && shouldUseTypewriter {
        // 智能判断文本变化类型
        if newText.hasPrefix(displayedText) && newText != displayedText {
            // 场景1: 文本内容追加（流式输出的常见情况）
            continueTypewriterAnimation(with: newText)
        } else if newText != displayedText {
            // 场景2: 文本内容完全变化（消息重新生成）
            restartTypewriterAnimation(with: newText)
        }
        // 场景3: 文本内容无变化，不做处理
    } else {
        // 非动画场景：直接显示完整文本
        displayedText = newText
        stopAnimation()
    }
}

3.4 动画执行机制

1. 动画启动流程

private func startTypewriterAnimation(for text: String) {
    // 步骤1: 重置显示状态
    displayedText = ""

    // 步骤2: 开始动画循环
    continueTypewriterAnimation(with: text)
}

private func continueTypewriterAnimation(with text: String) {
    // 前置检查：避免无效动画
    guard displayedText.count < text.count else { return }

    // 清理旧定时器，避免冲突
    stopAnimation()

    // 创建新的动画定时器
    animationTimer = Timer.scheduledTimer(withTimeInterval: typingSpeed, repeats: true) { timer in
        DispatchQueue.main.async {
            self.appendNextCharacters(from: text)
        }
    }
}

定时器机制的特点：在主线程执行、支持重复执行、启动前先停止旧定时器以避免冲突。

2. 字符追加逻辑

private func appendNextCharacters(from text: String) {
    let currentLength = displayedText.count

    // 边界检查：防止越界访问
    guard currentLength < text.count else {
        stopAnimation() // 动画完成，清理资源
        return
    }

    // 计算下一次显示的字符范围
    let endIndex = min(currentLength + chunkSize, text.count)
    let startIndex = text.index(text.startIndex, offsetBy: currentLength)
    let targetIndex = text.index(text.startIndex, offsetBy: endIndex)

    // 提取新字符并追加到显示文本
    let newChars = text[startIndex..= text.count {
        stopAnimation()
    }
}

字符处理的细节要点：Unicode安全（使用String.Index处理多字节字符）、边界保护（通过min()防止越界）、增量更新（仅追加新字符）。

3.5 视图渲染策略

1. 条件化渲染

var body: some View {
    Group {
        if let text = text, !text.isEmpty {
            if isAssistantMessage && isStreamingMessage && shouldUseTypewriter {
                typewriterView(text)  // 动画视图
            } else {
                staticView(text)      // 静态视图
            }
        }
    }
    // 生命周期绑定
    .onAppear { /* 启动动画 */ }
    .onDisappear { /* 清理资源 */ }
    .onChange(of: text) { /* 处理文本变化 */ }
    .onChange(of: isStreamingMessage) { /* 处理流式状态变化 */ }
}

2. Markdown支持

@ViewBuilder
private func typewriterView(_ text: String) -> some View {
    if messageUseMarkdown {
        Markdown(displayedText)
            .markdownBlockStyle(.blockquote) { configuration in
                configuration.label
                    .padding()
                    .markdownTextStyle {
                        FontSize(13)
                        FontWeight(.light)
                        BackgroundColor(nil)
                    }
                    .overlay(alignment: .leading) {
                        Rectangle()
                            .fill(Color.gray)
                            .frame(width: 4)
                    }
                    .background(Color.gray.opacity(0.2))
            }
    } else {
        Text(displayedText)
    }
}

3.6 生命周期管理

1. 资源自动管理

.onAppear {
    if let text = text, isAssistantMessage && isStreamingMessage && shouldUseTypewriter {
        startTypewriterAnimation(for: text)
    } else if let text = text {
        displayedText = text
    }
}
.onDisappear {
    stopAnimation() // 防止内存泄漏
}

2. 状态变化响应

.onChange(of: isStreamingMessage) { oldIsStreaming, newIsStreaming in
    if !newIsStreaming {
        // 流式传输结束，立即显示完整内容
        if let text = text {
            displayedText = text
        }
        stopAnimation()
    }
}

3. 内存泄漏防护

private func stopAnimation() {
    animationTimer?.invalidate()  // 停止定时器
    animationTimer = nil          // 释放引用
}

总结

三层协同优化——底层缓冲平滑了模型输出节奏，中层批处理合并了UI更新请求，UI层打字机动画提供了视觉缓冲体验。这套方案从技术实现到用户体验实现了全面覆盖，最终效果就是：文字输出如行云流水般顺畅，用户几乎感受不到任何延迟。这不再是未来的愿景，而是当下即可在iOS上落地实现的方案。