ssr页面首屏白屏两秒并非后端未渲染完，而是html返回后浏览器卡在解析阶段：network面板显示html已complete，但页面空白超1s，lighthouse报“eliminate render-blocking resources”，根源常是中未加defer/async或内联脚本过大，且ssr未流式输出（如未用res.write()分块flush首段dom）。
为什么 SSR 页面首屏仍白屏两秒
不是后端没渲染完，而是 HTML 返回后，浏览器卡在解析阶段。典型表现：Network 面板看到 HTML 已 complete，但页面空白超过 1s，Lighthouse 报“Eliminate render-blocking resources”。根源常是 <script></script> 放在 里没加 defer 或 async，或内联脚本过大。
SSR 生成的 HTML 必须满足“可流式解析”前提：首段内容（如 <header></header>、导航栏）应尽可能早地推送到客户端。若服务端模板引擎等整个 DOM 树拼完才 flush，就失去流式优势。
- Node.js 侧启用
res.write()分块输出，比如先吐...<header>...</header>，再异步渲染主体 - 避免在
中写<script>console.log(...)</script>这类内联逻辑——它永远阻塞，哪怕只一行 - 第三方统计脚本必须用
<script async src="..."></script>，且确保src域名已提前preconnect
DOM 层级深导致 SSR 页面重排抖动
后端渲染出的 HTML 若嵌套过深（比如 <div class="wrap"><div class="inner"><div class="content"><div class="item">...</div></div></div></div>），即使结构正确，也会让浏览器构建渲染树时反复回溯匹配 CSS 选择器，getBoundingClientRect() 等读操作极易触发强制同步布局。
语义化标签不只是 SEO 友好，更是性能杠杆：<main></main>、<section></section>、<article></article> 天然层级扁平，且现代浏览器对它们有解析加速路径。
- 把三层
<div class="xxx"> 替换为 <code><section><article><header></header></article></section>，DOM 节点数可能不变，但样式计算路径缩短 30%+ - Flexbox/Grid 布局代码应由 CSS 控制，HTML 层面杜绝“为了居中而套三層 div”
- 用 Chrome DevTools 的 “Layers” 面板检查是否意外创建过多合成层——
transform: translateZ(0)在 SSR 场景下极易滥用 - 所有
<img>必须带width和height属性（值可为具体像素，也可用 CSSaspect-ratio: 4/3） - SVG 图标优先内联（
<svg>...</svg>），避免<img src="icon.svg">多一次请求 + 解析延迟 - 服务端生成 HTML 时，若图片尺寸动态，需从 CDN 元数据或 CMS 字段中读取并注入到标签属性
-
<style></style>必须放在所有<link>之前，且不加media属性（除非明确区分设备） - 内联 CSS 体积建议 ≤ 14KB，超限会拖慢 HTML 解析；可用工具如
critters自动提取关键 CSS - 避免在内联
<style></style>中写@import—— 它会发起新请求，彻底破坏内联意义
图片未设宽高引发 SSR 页面布局抖动
SSR 渲染出的 <img src="/avatar.jpg"> 若没声明 width 和 height，浏览器无法预留空间。JS hydration 后图片加载完成瞬间，会挤开下方文字或按钮，用户肉眼可见“上跳”——这不是 JS 问题，是 HTML 编写缺陷。
loading="lazy" 只控制下载时机，不解决尺寸缺失；decoding="async" 必须与之配对，否则解码仍卡主线程。
关键 CSS 内联失效的常见配置错误
SSR 场景下常把首屏 CSS 内联进 ，但若 <style></style> 标签位置不对，或用了 media 属性却不匹配当前视口，照样阻塞渲染。
浏览器必须先构建 CSSOM 才能绘制，而内联 <style></style> 若被 <link rel="stylesheet"> 后续覆盖，或因 media="(min-width: 768px)" 在手机上被忽略，首屏样式就丢失了。
