背景与价值流式响应可边生成边发送，缩短 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 的环境：回退为常规响应或分段请求；提示用户升级。测试清单首屏分块：早期块尽快到达并可渲染；后续块按时追加。大文件传输：弱网与断网场景下行为合理，错误被捕获并提示。
发表评论 取消回复