使用 Fetch 处理流式大文本需边接收边解码边处理，通过 getReader() 持续读取 Uint8Array，配合 stream: true 的 TextDecoder 解决 UTF-8 截断，缓冲拼接后按行增量渲染并自动滚动。
用 Fetch 处理服务端返回的流式大文本，关键不是等全部下载完再解析，而是边接收、边解码、边处理。它适用于日志流、长文章分块加载、SSE（服务器发送事件）等场景，能显著提升响应感和内存效率。
确认响应支持流式传输
服务端需满足基本条件，客户端才能拿到可读流：
- 响应头中 Content-Type 明确，如
text/plain、text/event-stream或application/json-lines - 服务端使用分块传输编码（
Transfer-Encoding: chunked），且不提前关闭连接 - 避免启用 gzip 压缩（或确保浏览器能自动解压；现代浏览器默认支持，但流式解压逻辑复杂，建议服务端不压缩）
- 检查
response.body是否存在且为ReadableStream实例，空响应或重定向可能没有 body
获取并安全读取流数据
不要调用 response.text() 或 response.json() —— 它们会把整个流读完再返回 Promise，失去流式意义：
- 调用
const reader = response.body.getReader()获取读取器 - 用
while (true)循环 +await reader.read()持续拉取，每次返回{ done, value } -
value是Uint8Array，即原始二进制块；done === true表示流结束，应跳出循环 - 必须用
try/catch包裹reader.read()，捕获网络中断、解码失败等异常 - 读取完成后或中途取消时，调用
reader.releaseLock()防止资源泄漏
正确解码与拼接文本
UTF-8 多字节字符（如中文）可能被截断在 chunk 边界，直接解码易乱码：
立即学习“Java免费学习笔记（深入）”；
- 创建
const decoder = new TextDecoder('utf-8', { stream: true })，stream: true让解码器缓存不完整字符 - 维护一个字符串缓冲区
let buffer = ''，每次将decoder.decode(chunk.value)结果追加进去 - 不要对每个 chunk 单独按
\n切分；而应在buffer中查找完整换行符（\n或\r\n） - 若
buffer以换行符结尾，提取并处理所有完整行，清空已处理部分；否则保留末尾不完整行待下次拼接
实时增量渲染与控制
拿到完整行或段落后，立即更新界面，而非攒满再渲染：
- 用
element.insertAdjacentHTML('beforeend', '<div>' + line + '</div>')追加新内容 - 滚动容器时，设
element.scrollTop = element.scrollHeight自动滚到底部 - 防重排：可批量合并（如每 5 行一起插入）或节流（如限制每 16ms 最多渲染一次）
- 用户点击取消时，先调用
reader.cancel()，再用AbortController中断 fetch 请求本身
