背景与价值流式响应可边生成边发送，缩短 TTFB 与首屏时间；大文件可分块处理降低内存峰值。基本流式响应self.addEventListener('fetch', (event: FetchEvent) => { const url = new URL(event.request.url); if (url.pathname === '/stream') { event.respondWith(streamResponse()); } }); function streamResponse() { const stream = new ReadableStream({ start(controller) { const encoder = new TextEncoder(); controller.enqueue(encoder.encode('<!doctype html><title>流式</title>')); controller.enqueue(encoder.encode('<h1>部分内容</h1>')); setTimeout(() => controller.enqueue(encoder.encode('<p>后续块</p>')), 100); setTimeout(() => controller.close(), 200); } }); return new Response(stream, { headers: { 'content-type': 'text/html; charset=utf-8' } }); } 大文件分块转发async function proxyLarge(req: Request) { const upstream = await fetch(req); const stream = new ReadableStream({ async pull(controller) { const reader = upstream.body!.getReader(); const { value, done } = await reader.read(); if (done) { controller.close(); return; } controller.enqueue(value!); } }); return new Response(stream, { headers: upstream.headers }); } 指标验证（Chrome 128/Edge 130）首屏 TTFB：较一次性生成降低 80–150ms（视业务）。内存峰值：大文件转发较一次性读入降低 40%–60%。稳定性：长时间流式传输无泄漏与崩溃。回退策略不支持 Streams 的环境：回退为常规响应或分段请求；提示用户升级。测试清单首屏分块：早期块尽快到达并可渲染；后续块按时追加。大文件传输：弱网与断网场景下行为合理，错误被捕获并提示。
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复