核心是解耦接收、解析与渲染三步以防止内存暴涨和DOM崩溃：通过节流缓冲合并更新、结构化解析减少字符串操作、渲染层轻量化（textContent追加/增量diff/虚拟滚动）及连接生命周期管理（visibilitychange关闭、心跳超时、多实例隔离）。
大文本流式数据（如 AI 回复、日志输出、长文档分段）通过 SSE 接收时，卡顿、内存暴涨、DOM 崩溃等问题常见。核心不是“怎么接”，而是“怎么不被撑爆”——重点在解耦接收、解析与渲染三步，控制节奏、规避开销。
节流+缓冲：别让每条数据都触发 UI 更新
高频文本片段（比如逐 token 输出）若逐条调用 innerHTML 或 appendChild，会引发大量重排重绘。应主动合并处理：
- 用 setTimeout 或 requestIdleCallback 收集短时间窗口（如 30–100ms）内的所有文本块，再统一拼接、更新
- 设置硬性缓存上限（例如最多暂存 500 段未渲染文本），超出后丢弃最老段或触发截断提示，防止内存持续增长
- 对纯文本场景（如聊天回复、代码输出），直接用 textContent 替代 innerHTML，跳过 HTML 解析和 XSS 过滤开销
结构化解析：避免重复字符串操作
SSE 默认是文本流，data: 行需前端手动拼接、切分、提取。大文本下字符串 split / match / replace 开销显著：
- 服务端统一推送完整 JSON 字符串（如 data: {"chunk":"hello","seq":12,"done":false}），前端只做一次 JSON.parse()
- 禁用冗余字段：无断点续传需求时，省略 id: 和 event:；retry: 若固定，不必每条重复写
- 前端不校验格式（如 line.startsWith('data:')），信任服务端输出规范，减少运行时判断
渲染层轻量化：只更新必要部分
真正拖慢体验的，往往是 DOM 批量插入或高亮语法等操作：
立即学习“Java免费学习笔记（深入）”；
- 用 textContent += newChunk 直接追加到预设容器，比创建新节点 + append 快一个数量级
- 需要高亮或富文本？改用 增量 diff 渲染：仅对比并替换变化的 DOM 片段，而非整段重写
- 超长内容（如万行日志）启用 虚拟滚动，只维护可视区 20–30 行 DOM，滚动时动态替换内容，内存占用下降 90%+
连接与生命周期管理：防后台积压
大文本流常伴随长连接，用户切换标签或最小化窗口时，仍在接收却无法渲染，极易堆积：
- 监听 document.visibilitychange，页面隐藏时立即 eventSource.close()，恢复可见再重建连接
- 设置心跳超时：服务端定期发 data: ping\n\n，前端记录 lastActive 时间，30 秒无新数据则主动断连并提示“连接已空闲”
- 避免全局单例 EventSource；不同文本流（如对话流、日志流、进度流）应独立实例，互不影响
