为何Firefox在该简单示例中不渲染已部分接收的HTML？

我用Node.js + Express实现了类似Next.js的HTML流式渲染逻辑：先发送包含“Loading...”占位符的HTML片段，等待5秒后再发送脚本替换占位符内容。Chrome里能正常先显示“Loading...”，但Firefox会等整个请求完成后直接显示最终内容，完全看不到加载状态。

问题原因 #

这不是Chrome“偶然生效”，而是两款浏览器的渲染缓冲策略和Node.js的输出缓冲机制共同导致的：

1. Firefox的渲染触发条件：Firefox对未完成的HTML文档会保持缓冲，直到它认为有足够的内容可以开始渲染（比如收到更多结构标签、显式的刷新信号），不会像Chrome那样激进地解析部分内容。
2. Node.js的输出缓冲：默认情况下，res.write()会把数据存入缓冲区，直到缓冲区填满或调用res.end()才会发送给浏览器。即使HTTP支持分块传输，Node.js也不会自动实时推送每一次res.write()的内容。

解决方案 #

要让Firefox实时渲染分块内容，需要做两个关键调整：

1. 显式设置Content-Type响应头

确保浏览器明确识别内容为HTML，避免因类型猜测延迟渲染：

res.setHeader('Content-Type', 'text/html; charset=utf-8');

2. 强制刷新输出缓冲区

在发送初始HTML片段后，调用res.flush()强制Node.js立即把缓冲区内容推送给浏览器：

res.write(`
  <!DOCTYPE html>
  <html>
    <head>
      <title>Hello, world</title>
    </head>
    <body>
      <div id="main-content">Loading...</div>
`);
res.flush(); // 关键：立即推送内容到浏览器

修改后的完整代码 #

import { setTimeout } from "node:timers/promises";
import express from "express";

async function getContent() {
  await setTimeout(5000);
  return {
    id: "main-content",
    innerHTML: "<h1>Hello, world!</h1>",
  };
}

const app = express();

app.get("/", async (req, res) => {
  res.status(200);
  res.setHeader('Content-Type', 'text/html; charset=utf-8');

  res.write(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello, world</title>
      </head>
      <body>
        <div id="main-content">Loading...</div>
  `);
  res.flush(); // 强制推送初始HTML

  let content = await getContent();

  res.write(`
        <script>
          document.getElementById(${JSON.stringify(content.id)}).innerHTML = ${JSON.stringify(content.innerHTML)};
        </script>
  `);

  res.write(`
      </body>
    </html>
  `);

  res.end();
});

console.log("http://localhost:3000");
app.listen(3000);

原理说明 #

• res.flush()会直接将当前缓冲区的内容通过分块传输发送给浏览器，绕过Node.js的默认缓冲阈值。
• 显式的Content-Type头让Firefox无需猜测内容类型，能更快进入解析流程。

修改后，Firefox会和Chrome一样，在收到初始HTML片段后立即渲染“Loading...”文本，5秒后执行脚本更新内容。

内容的提问来源于stack exchange，提问作者Ratchanan Srirattanamet