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 三处正确执行。
This commit is contained in:
@@ -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 () => {
|
||||
|
||||
Reference in New Issue
Block a user