HTML长文档流式渲染（Streaming）提升TTFB的工程实践-html教程-PHP中文网

流式渲染通过边生成边发送html降低ttfb至200ms内，需禁用content-length、确保语法完整片段、正确配置压缩与cdn、预编译模板等前提条件。

html长文档流式渲染（streaming）提升ttfb的工程实践

流式渲染不是“让HTML变快”的魔法开关，而是把服务端响应从“等全部做完再发”改成“边做边发”。只要服务端正确启用 chunked 编码、浏览器能解析不完整但语法合法的 HTML 片段，TTFB 就能从 500ms+ 压到 200ms 内——前提是别在关键路径上阻塞。

为什么 Express 默认不支持流式 HTML

Express 的 res.send() 和 res.json() 都会自动设置 Content-Length，浏览器收到这个 header 就会死等全部字节收齐才开始解析。哪怕你手动 res.write() 多次，只要最后调了 res.send() 或没显式结束响应，Node.js 就会补上 Content-Length 并关闭连接。

不要用 res.send('...') —— 它强制缓冲整个字符串
改用 res.write('') + res.flush()（需提前启用 compression() 中间件）
确保中间件顺序：压缩中间件必须在 res.write() 之前挂载，否则它会把 chunk 缓存起来等收全再压
避免在 res.write() 后又调 res.redirect() 或修改状态码，会触发 ERR_HTTP_HEADERS_SENT

每个 write() 必须发语法完整的 HTML 片段

浏览器解析器不是拼图游戏，它不会等下一块来补全标签。发一个没闭合的 <div>，Safari 可能卡住，Chrome 也可能延迟渲染直到超时或收到闭合标签。 <ul> <li>安全单位是“最小可插入 DOM 的闭合结构”：比如 <code><p>文字</p>、<section><h2>标题</h2> <p>内容</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></section>

绝对不要切在属性值中间：res.write('<div class="') → 错误；应合并为

<div class=" card>
<li>中文务必确认响应头含 <code>charset=utf-8

，否则 res.write() 发出的字符串可能乱码（Node.js 默认 UTF-8，但模板文件若带 BOM 就会坏）

首块建议包含 <meta charset="utf-8">，这是最稳妥的启动帧

React Server Components 场景下如何启用流式

Next.js 13+ 的 App Router 默认开启流式，但前提是你没在 Server Component 里写阻塞逻辑。一旦某个组件内部 await fetch() 耗时过长，它后面的 Suspense fallback 就无法提前下发。

检查是否所有数据获取都用了 async/await，而不是 fs.readFileSync 或未 await 的 Promise
把慢接口拆到独立 <suspense fallback=""></suspense> 区域，避免拖垮整个页面骨架
禁用开发模式下的 source map 和错误页中间件，它们会让每个请求多走 50–100ms
确认 NODE_ENV=production，否则 Next.js 会跳过大部分流式优化路径

CDN 和缓存对流式的影响

CDN 通常会缓冲整个响应体再转发，这直接废掉流式效果。不是所有 CDN 都支持透传 chunked 编码，尤其是那些默认开启“响应聚合”或“gzip 预压缩”的边缘节点。

Cloudflare：需关闭 Auto Minify（HTML 选项），并确认 Cache Level 设为 Bypass 或 Standard（不能选 Aggressive）
Vercel / Netlify：静态路由默认不缓存 HTML，但动态路由（如 /blog/[id]）需手动配置 cacheControl，设为 no-cache, must-revalidate 而非 public
自建 Nginx：确保没有 proxy_buffering on，且 chunked_transfer_encoding on 已启用（默认开启）
关键判断点：用 curl -v 访问，看响应头是否有 Transfer-Encoding: chunked 且无 Content-Length