AI 应用的前端性能优化：流式渲染、Token 节约与缓存策略

export async function POST(req: Request) {
const { messages } = await req.json();

const result = streamText({
model: openai("gpt-4o"),
messages,
});

return result.toDataStreamResponse();
}

export default function Chat() {
const { messages, input, handleInputChange, handleSubmit, isLoading } =
useChat();

return (
<div>
{messages.map((msg) => (
<div key={msg.id}>{msg.content}</div>
))}
<form onSubmit={handleSubmit}>
<input value={input} onChange={handleInputChange} />
<button type="submit" disabled={isLoading}>发送</button>
</form>
</div>
);
}

const reader = response.body!.getReader();
const decoder = new TextDecoder();
let buffer = "";

while (true) {
const { done, value } = await reader.read();
if (done) break;

buffer += decoder.decode(value, { stream: true });

const lines = buffer.split("\n");
buffer = lines.pop() || "";

for (const line of lines) {
if (!line.startsWith("data: ")) continue;
const data = line.slice(6);
if (data === "[DONE]") return;

const parsed = JSON.parse(data);
const token = parsed.choices?.[0]?.delta?.content;
if (token) {
onToken(token); // 逐 token 回调，更新 UI
}
}
}
}

function onToken(token: string) {
pendingText += token;

if (!rafId) {
rafId = requestAnimationFrame(() => {
setText((prev) => prev + pendingText);
pendingText = "";
rafId = null;
});
}
}

const renderedRef = useRef("");
const rawRef = useRef("");

function onToken(token: string) {
rawRef.current += token;
// 只在段落结束时重新解析，避免频繁 DOM 更新
if (token.includes("\n") || token.includes("E6DB74">```")) {
renderedRef.current = marked.parse(rawRef.current);
forceUpdate();
}
}

async function handleSubmit() {
abortControllerRef.current = new AbortController();

const response = await fetch("/api/chat", {
method: "POST",
body: JSON.stringify({ messages }),
signal: abortControllerRef.current.signal,
});
// 处理流式响应...
}

function handleStop() {
abortControllerRef.current?.abort();
}

// 直接调用
<button onClick={stop} disabled={!isLoading}>停止生成</button>

// ✅ 精简的 System Prompt（约 80 token）
const systemPrompt = `前端技术助手。通俗解释，附可运行代码。不确定时如实说明。`;

// 从最新消息往前保留
for (let i = messages.length - 1; i >= 0; i--) {
const msgTokens = estimateTokens(messages[i].content);
if (totalTokens + msgTokens > maxTokens) break;
trimmed.unshift(messages[i]);
totalTokens += msgTokens;
}

// 如果有被截断的历史，加一条摘要
if (trimmed.length < messages.length) {
const droppedMessages = messages.slice(0, messages.length - trimmed.length);
const summary = await summarizeMessages(droppedMessages);
trimmed.unshift({
role: "system",
content: E6DB74">`之前的对话摘要：${summary}`,
});
}

return trimmed;
}

function estimateTokens(text: string): number {
// 粗略估算：中文 1 字 ≈ 2 token，英文 1 词 ≈ 1.3 token
return Math.ceil(text.length * 1.5);
}

async function routeToModel(query: string) {
// 先用便宜模型判断复杂度
const { text: complexity } = await generateText({
model: openai("gpt-4o-mini"),
prompt: `判断以下问题的复杂度，回答 simple 或 complex：\n${query}`,
maxTokens: 10,
});

const model = complexity.trim() === "simple"
? openai("gpt-4o-mini")  // $0.15 / 1M input tokens
: openai("gpt-4o");       // $2.50 / 1M input tokens

return model;
}

const { object } = await generateObject({
model: openai("gpt-4o"),
schema: z.object({
answer: z.string().describe("简洁的回答，不超过 200 字"),
codeExample: z.string().optional().describe("代码示例（如有必要）"),
references: z.array(z.string()).optional().describe("参考资料链接"),
}),
prompt: userQuestion,
});

const redis = new Redis();

function getCacheKey(messages: Message[]): string {
const content = JSON.stringify(messages);
return `ai:chat:${createHash("md5").update(content).digest("hex")}`;
}

async function cachedChat(messages: Message[]) {
const key = getCacheKey(messages);

// 查缓存
const cached = await redis.get(key);
if (cached) {
console.log("Cache hit!");
return JSON.parse(cached);
}

// 没命中，调 LLM
const result = await generateText({
model: openai("gpt-4o"),
messages,
});

// 写缓存，TTL 1 小时
await redis.setex(key, 3600, JSON.stringify(result.text));

return result.text;
}

const embeddings = new OpenAIEmbeddings({
modelName: "text-embedding-3-small",
});

interface CacheEntry {
question: string;
answer: string;
embedding: number[];
}

const cacheStore = await MemoryVectorStore.fromTexts([], [], embeddings);
const cacheMap = new Map<string, string>();

async function semanticCachedChat(question: string) {
// 1. 语义检索：找相似问题
const results = await cacheStore.similaritySearchWithScore(question, 1);

if (results.length > 0) {
const [doc, score] = results[0];
// 相似度 > 0.92 认为是同一个问题
if (score > 0.92) {
console.log(`Semantic cache hit! (similarity: ${score.toFixed(3)})`);
return cacheMap.get(doc.pageContent);
}
}

// 2. 没命中，调 LLM
const { text: answer } = await generateText({
model: openai("gpt-4o"),
prompt: question,
});

// 3. 写入缓存
await cacheStore.addDocuments([
{ pageContent: question, metadata: {} },
]);
cacheMap.set(question, answer);

return answer;
}

async function cachedEmbed(text: string): Promise<number[]> {
const key = text.trim().toLowerCase();

if (embeddingCache.has(key)) {
return embeddingCache.get(key)!;
}

const result = await embeddings.embedQuery(text);
embeddingCache.set(key, result);
return result;
}

return (
<div className="prose">
<ReactMarkdown>{content}</ReactMarkdown>
{isStreaming && <span className="animate-blink">▎</span>}
</div>
);
}

return (
<div className="flex gap-2 mt-2 text-gray-400">
<button
onClick={onRegenerate}
className="hover:text-blue-500"
title="重新生成"
>
🔄
</button>
<button
onClick={() => {
setFeedback("up");
trackFeedback(messageId, "positive");
}}
className={feedback === "up" ? "text-green-500" : "hover:text-green-500"}
>
👍
</button>
<button
onClick={() => {
setFeedback("down");
trackFeedback(messageId, "negative");
}}
className={feedback === "down" ? "text-red-500" : "hover:text-red-500"}
>
👎
</button>
</div>
);
}

return (
<div className="text-xs text-gray-400 flex gap-4">
<span>输入: {usage.input.toLocaleString()} tokens</span>
<span>输出: {usage.output.toLocaleString()} tokens</span>
<span>≈ ${cost.toFixed(4)}</span>
</div>
);
}

console.log(result.usage);
// { promptTokens: 150, completionTokens: 280, totalTokens: 430 }

// 在 useChat 的回调中埋点
const { messages } = useChat({
onResponse(response) {
startTime.current = Date.now();
},
onFinish(message) {
trackAIMetrics({
ttft: firstTokenTime.current - startTime.current,
totalLatency: Date.now() - startTime.current,
inputTokens: message.usage?.promptTokens ?? 0,
outputTokens: message.usage?.completionTokens ?? 0,
model: "gpt-4o",
cached: response.headers.get("x-cache") === "HIT",
});
},
});

// ✅ 用 useDeferredValue 或节流
const deferredContent = useDeferredValue(content);
const html = useMemo(() => marked.parse(deferredContent), [deferredContent]);

async function getModel(query: string) {
const quick = quickRouting(query);
if (quick !== "unknown") {
return quick === "simple" ? openai("gpt-4o-mini") : openai("gpt-4o");
}
// 规则搞不定再用模型判断
return await routeWithLLM(query);
}

// 显示错误状态 + 重试按钮
{error && (
<div className="text-red-500 flex items-center gap-2">
<span>出错了：{error.message}</span>
<button onClick={reload} className="underline">重试</button>
</div>
)}

async function handleSubmit() {
if (isLoadingRef.current) return; // 防重复提交
isLoadingRef.current = true;

try {
await sendMessage();
} finally {
isLoadingRef.current = false;
}
}