需正确处理SSE协议：一、用fetch+ReadableStream发起请求，响应头含text/event-stream等字段；二、逐行解析data:内容并拼接JSON；三、用textContent追加纯文本防XSS；四、按lastEventId重连并指数退避；五、兼容旧浏览器降级用EventSource或polyfill。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜
如果您在网页端调用DeepSeek API并希望实时渲染模型返回的流式文本，但响应内容延迟显示或出现乱序、截断现象，则可能是由于未正确处理Server-Sent Events（SSE）协议的数据分块与解析逻辑。以下是实现流式数据在网页端稳定渲染的具体步骤：
一、建立符合SSE规范的HTTP请求
浏览器需通过EventSource或fetch+ReadableStream发起请求，且服务端响应头必须包含text/event-stream类型及必要的缓存禁用指令，否则浏览器将无法持续接收事件流。
1、使用fetch发送POST请求，设置headers中Content-Type为application/json，并在body中传入包含model、messages、stream: true等字段的JSON对象。
2、在fetch的Response对象上调用response.body.getReader()获取可读流，确保不使用response.json()或response.text()等终结型方法。
3、设置request headers中的Accept为text/event-stream，显式声明客户端支持SSE格式。
4、在服务端返回的HTTP响应头中，必须包含Content-Type: text/event-stream、Cache-Control: no-cache、Connection: keep-alive三项关键字段。
二、解析event: message与data: 字段的原始字节流
DeepSeek API的SSE响应并非标准单data行格式，实际每条消息含多行：event: message、id: xxx、data: {json}，需逐行扫描换行符并提取data后的内容，否则会将JSON结构体误判为纯文本。
1、对每次read()返回的Uint8Array调用decoder.decode(chunk, {stream: true})转为字符串，避免UTF-8多字节字符被截断。
2、将解码后的字符串按\n分割，遍历每一行，识别以data: 开头的行并去除前缀，保留后续所有字符（包括嵌套JSON中的换行）。
3、当遇到空行时，将已累积的data片段拼接为完整JSON字符串，再通过JSON.parse()提取delta.content字段值。
4、忽略所有不含data: 的行，如event:、id:、retry:等控制字段，防止向UI注入非文本内容。
三、逐字符追加至DOM并防XSS注入
流式内容需以最小粒度更新页面，但直接innerHTML赋值存在脚本执行风险；应仅提取纯文本并使用textContent或createTextNode插入，同时保留换行与空格语义。
1、创建一个预置的
容器，设置CSS white-space: pre-wrap确保换行符生效。
2、每次解析出delta.content后，调用document.getElementById(‘output’).appendChild(document.createTextNode(content))。
