[{"data":1,"prerenderedAt":169},["ShallowReactive",2],{"content-/blog/ai-generation-streaming":3,"related-blog":144},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":138,"_id":139,"_source":140,"_file":141,"_stem":142,"_extension":143},"/blog/ai-generation-streaming","blog",false,"","AI 生成流式输出","AI 页面生成过程的实时流式展示，让用户看到生成过程","AI 生成流式输出, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":129},"root",[18,26,32,47,52,65,70,83,88,101,106,119,124],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","流式生成（streaming generation）在 AI 页面生成与实时预览场景中十分重要。本文总结常见流式设计模式与工程要点。",{"type":19,"tag":27,"props":28,"children":30},"h3",{"id":29},"为什么使用流式",[31],{"type":24,"value":29},{"type":19,"tag":33,"props":34,"children":35},"ul",{},[36,42],{"type":19,"tag":37,"props":38,"children":39},"li",{},[40],{"type":24,"value":41},"降低感知延迟：用户可以边生成边查看部分内容。",{"type":19,"tag":37,"props":43,"children":44},{},[45],{"type":24,"value":46},"支持增量渲染与错误恢复，提高交互体验。",{"type":19,"tag":27,"props":48,"children":50},{"id":49},"设计模式",[51],{"type":24,"value":49},{"type":19,"tag":33,"props":53,"children":54},{},[55,60],{"type":19,"tag":37,"props":56,"children":57},{},[58],{"type":24,"value":59},"分块生成：把页面按模块或段落分块生成并逐块推送。",{"type":19,"tag":37,"props":61,"children":62},{},[63],{"type":24,"value":64},"差异更新：只推送模板变更的差异以减小带宽与渲染成本。",{"type":19,"tag":27,"props":66,"children":68},{"id":67},"传输与协议",[69],{"type":24,"value":67},{"type":19,"tag":33,"props":71,"children":72},{},[73,78],{"type":19,"tag":37,"props":74,"children":75},{},[76],{"type":24,"value":77},"使用 SSE 或 WebSocket 做低延迟推送，结合序列化协议（JSON Lines）简化消费端解析。",{"type":19,"tag":37,"props":79,"children":80},{},[81],{"type":24,"value":82},"提供断点续传与部分重试机制，保证在网络抖动时系统健壮。",{"type":19,"tag":27,"props":84,"children":86},{"id":85},"前端渲染策略",[87],{"type":24,"value":85},{"type":19,"tag":33,"props":89,"children":90},{},[91,96],{"type":19,"tag":37,"props":92,"children":93},{},[94],{"type":24,"value":95},"增量占位与占位骨架屏（skeleton）可以提高流式渲染的视觉稳定性。",{"type":19,"tag":37,"props":97,"children":98},{},[99],{"type":24,"value":100},"原子更新策略（小颗粒渲染）能防止闪烁与布局抖动。",{"type":19,"tag":27,"props":102,"children":104},{"id":103},"工程实践",[105],{"type":24,"value":103},{"type":19,"tag":33,"props":107,"children":108},{},[109,114],{"type":19,"tag":37,"props":110,"children":111},{},[112],{"type":24,"value":113},"记录生成状态与日志，方便回溯与问题定位。",{"type":19,"tag":37,"props":115,"children":116},{},[117],{"type":24,"value":118},"在后端做速率限制与优先级调度，保证资源公平使用。",{"type":19,"tag":27,"props":120,"children":122},{"id":121},"结论",[123],{"type":24,"value":121},{"type":19,"tag":20,"props":125,"children":126},{},[127],{"type":24,"value":128},"流式生成显著改善用户体验，但需要周全的错误处理与资源控制策略。设计时兼顾可观察性、重试与幂等性可以显著提高稳定性。",{"title":7,"searchDepth":130,"depth":130,"links":131},3,[132,133,134,135,136,137],{"id":29,"depth":130,"text":29},{"id":49,"depth":130,"text":49},{"id":67,"depth":130,"text":67},{"id":85,"depth":130,"text":85},{"id":103,"depth":130,"text":103},{"id":121,"depth":130,"text":121},"markdown","content:blog:ai-generation-streaming.md","content","blog/ai-generation-streaming.md","blog/ai-generation-streaming","md",[145,153,161],{"_path":146,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":147,"description":148,"keywords":149,"author":11,"date":12,"category":13,"image":14,"_type":138,"_id":150,"_source":140,"_file":151,"_stem":152,"_extension":143},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":154,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":155,"description":156,"keywords":157,"author":11,"date":12,"category":13,"image":14,"_type":138,"_id":158,"_source":140,"_file":159,"_stem":160,"_extension":143},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":162,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":163,"description":164,"keywords":165,"author":11,"date":12,"category":13,"image":14,"_type":138,"_id":166,"_source":140,"_file":167,"_stem":168,"_extension":143},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945276644]