feat: 升级至 v0.3.11 — 流式输出性能优化 12 项，解决长内容卡死

针对 AI 流式输出长内容时应用卡死问题，实施 12 项性能优化：渲染层优化（F1/F3/F7）： - F1: React.memo 包裹 MessageItem/AssistantMessage，跳过历史消息重渲染 - F3: 流式时用纯文本渲染，避免 ReactMarkdown 全量重解析 O(n²) - F7: useMemo 缓存 ReactMarkdown 元素，非流式时复用实例滚动与布局（F2/F4/F10/F12）： - F2: 滚动节流 rAF + 100ms throttle + trailing 兜底，避免高频布局 - F4: CSS content-visibility 准虚拟滚动，跳过不可见区域布局 - F10: CSS contain 隔离 markdown 布局计算 - F12: 滚动容器 transform: translateZ(0) GPU 加速状态与 IPC 批处理（F5/F8/F9）： - F5: 渲染进程 text_delta rAF 批处理，合并多次 store 写入 - F8: 主进程 text_delta 32ms 节流合并，降低 IPC 频率 - F9: reasoning_delta traceSteps thought 走 rAF 批处理代码清理（F11）： - F11: 移除 rehypeRaw，节省 raw HTML 解析开销 + 防 AI 输出注入验证：tsc --noEmit 通过，flush 逻辑在 done/error/cleanup 三处正确执行。
2026-07-21 14:38:27 +08:00
parent cd681b949a
commit 8973ea6d47
9 changed files with 350 additions and 54 deletions
@@ -5,15 +5,20 @@
 * 1. 💭 思考阶段 — ThoughtBlock 自动展开，流式追加 reasoning content
 * 2. 🔧 工具调用 — ToolCallCard 展示调用和结果
 * 3. ✏️ 回复阶段 — Markdown 渲染，打字光标指示流式输出
+ *
+ * F1 性能优化: 使用 React.memo 包裹，避免历史消息在流式 delta 时重渲染。
+ * 配合 agentStatus 选择器优化：历史消息（isStreaming=false）不订阅真实 agentStatus，
+ * 避免 agentStatus 频繁变化（thinking/executing/idle）触发所有 AssistantMessage 重渲染。
 */

-import { useState, useCallback } from 'react';
+import { useState, useCallback, memo, useMemo } from 'react';
 import { Box, Typography, Avatar, Stack, IconButton, Tooltip } from '@mui/material';
 import { Bot, Copy, Check } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeHighlight from 'rehype-highlight';
-import rehypeRaw from 'rehype-raw';
+// F11: 移除 rehypeRaw — 避免解析 raw HTML 的开销 + 安全考虑（防止 AI 输出 HTML 注入）
+// 如需恢复内联 HTML 渲染，可重新引入 rehype-raw
 import type { ChatMessage } from '@renderer/stores/agent-store';
 import { useAgentStore } from '@renderer/stores/agent-store';
 import { ThoughtBlock } from './ThoughtBlock';
@@ -27,11 +32,14 @@ interface AssistantMessageProps {
  isStreaming?: boolean;
 }

-export function AssistantMessage({ message, isStreaming }: AssistantMessageProps): React.JSX.Element {
+function AssistantMessageImpl({ message, isStreaming }: AssistantMessageProps): React.JSX.Element {
  // 直接使用 message.content — updateLastAssistantMessage 已实时更新此字段
  const content = message.content;
  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
-  const agentStatus = useAgentStore((s) => s.agentStatus);
+  // F1: 历史消息（isStreaming=false）固定返回 'idle'，避免 agentStatus 变化触发重渲染
+  // 逻辑等价：原 isThinking = agentStatus === 'thinking' && isStreaming
+  //          新 isThinking = agentStatus === 'thinking'（agentStatus 在非流式时恒为 'idle'）
+  const agentStatus = useAgentStore((s) => (isStreaming ? s.agentStatus : 'idle'));

  const contextMenuItems = createContextMenuItems('message', { content });

@@ -40,6 +48,29 @@ export function AssistantMessage({ message, isStreaming }: AssistantMessageProps
  const hasContent = !!content;
  const isThinking = agentStatus === 'thinking' && isStreaming;

+  // F7: useMemo 缓存 ReactMarkdown 元素，避免非流式时因 isStreaming/isLast 变化重新创建元素
+  // 流式时此元素不被渲染（用纯文本），useMemo 仍会更新但仅创建轻量 React 元素对象
+  // 非流式时 content 不变，useMemo 复用缓存，避免重新创建 ReactMarkdown 组件实例
+  const markdownElement = useMemo(() => (
+    <Box className="prose-metona">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeHighlight]}
+        components={{
+          code({ className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className ?? '');
+            // rehype-highlight 会把代码替换为 <span> 高亮元素，需提取纯文本
+            const codeStr = extractTextContent(children).replace(/\n$/, '');
+            if (!match) return <code className={className} {...props}>{children}</code>;
+            return <CodeBlock language={match[1]} code={codeStr} />;
+          },
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </Box>
+  ), [content]);
+
  return (
    <Stack
      direction="row"
@@ -109,23 +140,32 @@ export function AssistantMessage({ message, isStreaming }: AssistantMessageProps
            )}

            {hasContent ? (
-              <Box className="prose-metona">
-                <ReactMarkdown
-                  remarkPlugins={[remarkGfm]}
-                  rehypePlugins={[rehypeHighlight, rehypeRaw]}
-                  components={{
-                    code({ className, children, ...props }) {
-                      const match = /language-(\w+)/.exec(className ?? '');
-                      // rehype-highlight 会把代码替换为 <span> 高亮元素，需提取纯文本
-                      const codeStr = extractTextContent(children).replace(/\n$/, '');
-                      if (!match) return <code className={className} {...props}>{children}</code>;
-                      return <CodeBlock language={match[1]} code={codeStr} />;
-                    },
+              isStreaming ? (
+                // F3: 流式时用纯文本渲染，避免 ReactMarkdown 对长内容重新解析导致卡顿。
+                // 根因：每个 delta 触发 ReactMarkdown 全量重新解析 + rehypeHighlight 高亮，
+                //       内容长度增加时单次解析耗时 O(n) 退化，30+ delta/秒下呈 O(n²) 卡死。
+                // 流结束后自动切换到 ReactMarkdown 一次性渲染（一次性 O(n)，可接受）。
+                <Box
+                  component="pre"
+                  className="prose-metona prose-streaming"
+                  sx={{
+                    margin: 0,
+                    padding: 0,
+                    fontFamily: 'inherit',
+                    fontSize: 14,
+                    lineHeight: 1.6,
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                    overflowWrap: 'break-word',
+                    color: 'text.primary',
                  }}
                >
                  {content}
-                </ReactMarkdown>
-              </Box>
+                </Box>
+              ) : (
+                // F7: 使用 useMemo 缓存的 ReactMarkdown 元素
+                markdownElement
+              )
            ) : isStreaming ? (
              <Typography variant="body2" sx={{ color: 'text.disabled', fontStyle: 'italic', py: 1 }}>
                {isThinking ? '正在思考...' : '正在生成回复...'}
@@ -160,6 +200,13 @@ export function AssistantMessage({ message, isStreaming }: AssistantMessageProps
  );
 }

+/**
+ * F1: memo 包裹 AssistantMessage。
+ * - 流式 delta 时仅最后一条 message 引用变化，历史消息跳过 re-render
+ * - agentStatus 订阅已优化（非流式时返回 'idle'），历史消息不受 agentStatus 变化影响
+ */
+export const AssistantMessage = memo(AssistantMessageImpl);
+
 function CodeBlock({ language, code }: { language: string; code: string }): React.JSX.Element {
  const [copied, setCopied] = useState(false);
  const handleCopy = useCallback(async () => {
@@ -2,8 +2,13 @@
 * MessageItem — 单条消息路由组件
 *
 * 根据消息 role 路由到对应的子组件渲染。
+ *
+ * F1 性能优化: 使用 React.memo 包裹，避免流式 delta 触发历史消息重渲染。
+ * 浅比较策略：message 引用变化（store 仅替换最后一条）或 isStreaming 变化时才重渲染。
+ * 历史消息的 message 引用在 delta 流中保持不变，因此可跳过 re-render。
 */

+import { memo } from 'react';
 import { Box, Typography, Stack } from '@mui/material';
 import { Terminal } from 'lucide-react';
 import type { ChatMessage } from '@renderer/stores/agent-store';
@@ -18,7 +23,7 @@ interface MessageItemProps {
  isStreaming?: boolean;
 }

-export function MessageItem({ message, isLast, isStreaming }: MessageItemProps): React.JSX.Element {
+function MessageItemImpl({ message, isLast, isStreaming }: MessageItemProps): React.JSX.Element {
  switch (message.role) {
    case 'user':
      return <UserMessage message={message} />;
@@ -41,6 +46,14 @@ export function MessageItem({ message, isLast, isStreaming }: MessageItemProps):
  }
 }

+/**
+ * F1: memo 默认浅比较 props。
+ * - message 是对象引用，store 更新最后一条时只替换最后一条，历史消息引用不变 → 跳过 re-render
+ * - isStreaming 是 boolean，流式过程中值不变（持续 true），流结束才变化一次 → 历史消息仅重渲染一次
+ * - isLast 是 boolean，仅在最后一条切换时变化
+ */
+export const MessageItem = memo(MessageItemImpl);
+
 /** ToolMessage — 独立的工具结果消息（role=tool） */
 function ToolMessage({ message }: { message: ChatMessage }): React.JSX.Element {
  return (
@@ -13,13 +13,72 @@ export function MessageList(): React.JSX.Element {
  const isStreaming = useAgentStore((s) => s.isStreaming);
  const messagesEndRef = useRef<HTMLDivElement>(null);

-  // 流式输出时高频触发，使用 throttle 避免滚动卡顿
+  // F2: 滚动节流优化
+  // 问题：原实现用 setTimeout(80) debounce + 'smooth'，高频 delta 时 trailing 永不触发，
+  //       且 'smooth' 在长列表上触发主线程布局动画，加剧卡顿。
+  // 方案：
+  //   - 流式时：100ms 节流 + trailing 兜底 + 'auto' 行为（同步布局，无动画占主线程）
+  //   - 非流式时：立即 'smooth' 滚动（新消息发送/接收完成）
+  //   - 用 rAF 同步到下一帧，与 React 渲染合并，避免一帧内多次布局
+  const lastScrollRef = useRef(0);
+  const trailingTimerRef = useRef<number | null>(null);
+  const rafRef = useRef<number | null>(null);
+
  useEffect(() => {
-    const timer = setTimeout(() => {
-      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, 80);
-    return () => clearTimeout(timer);
-  }, [messages]);
+    const now = performance.now();
+    const elapsed = now - lastScrollRef.current;
+
+    // 调度一次 rAF 滚动（自动取消上一次挂起的 rAF）
+    const doScroll = (behavior: ScrollBehavior) => {
+      lastScrollRef.current = performance.now();
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        messagesEndRef.current?.scrollIntoView({ behavior });
+      });
+    };
+
+    // 非流式或首次进入：立即平滑滚动（新消息出现）
+    if (!isStreaming || lastScrollRef.current === 0) {
+      if (trailingTimerRef.current !== null) {
+        clearTimeout(trailingTimerRef.current);
+        trailingTimerRef.current = null;
+      }
+      doScroll('smooth');
+      return;
+    }
+
+    // 流式中：100ms 节流 + trailing 兜底
+    if (elapsed >= 100) {
+      // 已过节流窗口，立即执行
+      if (trailingTimerRef.current !== null) {
+        clearTimeout(trailingTimerRef.current);
+        trailingTimerRef.current = null;
+      }
+      doScroll('auto');
+    } else if (trailingTimerRef.current === null) {
+      // 在节流窗口内，安排 trailing 滚动（保证最后一次 delta 后到底）
+      const remaining = 100 - elapsed;
+      trailingTimerRef.current = window.setTimeout(() => {
+        trailingTimerRef.current = null;
+        doScroll('auto');
+      }, remaining);
+    }
+  }, [messages, isStreaming]);
+
+  // 组件卸载时清理所有挂起的 timer 和 rAF
+  useEffect(() => {
+    return () => {
+      if (trailingTimerRef.current !== null) {
+        clearTimeout(trailingTimerRef.current);
+        trailingTimerRef.current = null;
+      }
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, []);

  if (messages.length === 0 && !isStreaming) {
    return (
@@ -35,10 +94,27 @@ export function MessageList(): React.JSX.Element {
  }

  return (
-    <Box sx={{ flex: 1, overflowY: 'auto', px: 2, py: 3 }}>
+    // F12: GPU 加速 — transform: translateZ(0) 将滚动容器提升为合成层
+    // 滚动时由合成器线程处理，避免主线程重绘叠加卡顿
+    // 风险评估：已确认 chat 目录内无 position: fixed 元素；
+    //           ContextMenu 用 MUI Portal 渲染到 document.body，不受 transform 影响
+    <Box sx={{ flex: 1, overflowY: 'auto', px: 2, py: 3, transform: 'translateZ(0)' }}>
      <Box sx={{ maxWidth: 768, mx: 'auto', display: 'flex', flexDirection: 'column', gap: 3 }}>
        {messages.map((msg, i) => (
-          <MessageItem key={msg.id} message={msg} isLast={i === messages.length - 1} isStreaming={isStreaming} />
+          // F4: content-visibility 准虚拟滚动
+          // 浏览器原生支持，不可见区域跳过布局和绘制（DOM 节点保留但渲染开销 O(1)）。
+          // 配合 F1 memo（跳过 re-render）+ F3 流式纯文本，历史消息开销降至最低。
+          // contain-intrinsic-size 提供估算高度，避免滚动时高度抖动。
+          // 注：如后续需真正虚拟滚动（移除 DOM 节点），可升级到 react-virtuoso。
+          <Box
+            key={msg.id}
+            sx={{
+              'content-visibility': 'auto',
+              'contain-intrinsic-size': 'auto 300px',
+            }}
+          >
+            <MessageItem message={msg} isLast={i === messages.length - 1} isStreaming={isStreaming} />
+          </Box>
        ))}
        <StreamingIndicator />
        <div ref={messagesEndRef} />