首屏html必须含完整结构，不能靠hydration补全：关键区块需在初始html中存在真实dom节点并带宽高属性，skeleton须复刻真实盒模型，表单反馈容器须硬编码在html中。
首屏 HTML 必须含完整结构，不能靠 hydration 补全
服务端渲染（SSR）或静态生成（SSG）时，首屏关键区块若只输出一个空 <div id="root"></div>，后续全靠 React/Vue 客户端 hydration 渲染，就等于把占位责任甩给 JS——浏览器首帧看到的是 0 高度容器，图片、文字、卡片统统没尺寸，CLS 必然超标。
真实场景中，常见错误是：SSR 框架配置漏掉 renderStatic 或未启用 ssr: true，导致首页 HTML 只有骨架壳子；或组件内部用了 useEffect(() => {...}, []) 延迟挂载内容，等 JS 执行完才插入 DOM。
- 首屏关键区块（如 banner、主图文、导航栏）必须在初始 HTML 中存在真实 DOM 节点，哪怕内容是占位文本或
<img src="placeholder.jpg" style="max-width:90%" style="max-width:90%"> - 避免用
v-if/{condition && <component></component>}控制首屏核心区块的显隐——它会彻底删掉节点，hydration 时再插入，就是一次 layout shift - 第三方脚本（如评论、推荐模块）若无法 SSR，至少用
<div class="widget-placeholder" style="min-height: 200px;"></div>占位，而不是留白
图片/视频标签必须带 width 和 height 属性
不写 width 和 height 是首屏 CLS 最高频源头。浏览器解析 HTML 时，若 <img> 没这两个属性，就无法推算固有宽高比，初始渲染占位为 0×0 或行内默认尺寸（通常 1em 高），等资源加载完成才重排——下方所有元素瞬间下移。
别信“CSS aspect-ratio 能替代”的说法：旧版 Safari 不支持，Chrome 在首帧仍可能 fallback 到无占位状态；max-width: 100% 更是无效补救，它只约束上限，不提供初始占位。
-
<img src="hero.jpg" style="max-width:90%" style="max-width:90%" alt="首页主图">—— 数值可按实际图比例缩放，关键是让浏览器首帧即知尺寸 -
<video></video>同样需要width/height，否则 hover 加边框或播放控件出现时易引发盒模型突变 - SVG 必须带
viewBox，强烈建议也加width/height，防止某些环境 fallback 到 300×150 再缩放
Skeleton 组件必须与真实 DOM 具备相同盒模型
用 <suspense fallback="<Skeleton"></suspense>> 时，如果 Skeleton 只是几个灰色方块，但真实组件里是带 padding/margin 的卡片、文字行高不同、甚至用了 flex gap，那 hydration 完成瞬间就会抖——因为占位结构和最终结构不一致。
这不是动画问题，是尺寸错配。浏览器以为占位够了，结果真实内容一进来，高度/宽度/间距全变了。
-
Skeleton的每个区块需复刻真实组件的min-height、padding、margin、font-size和line-height - 若真实组件用
grid-template-columns: repeat(3, 1fr)，Skeleton也得用相同 grid 结构，而非简单三个div - 避免在
Skeleton里用position: absolute脱离文档流，除非真实组件也这么干——否则占位高度为 0
表单反馈容器必须硬编码在 HTML 中
校验失败后才用 JS appendChild 插入提示文案，等于在流式布局里突然塞进一个新 div，下方所有内容立刻下移。这不是“轻微抖动”，是结构塌陷，CLS 直接+0.2 以上。
这类容器不是装饰性元素，而是布局关键节点。隐藏不能靠 display: none，否则父容器高度塌缩，后续 show 动画会截断或错位。
- HTML 中必须存在紧邻 input 的反馈节点：
<input name="email"><div class="error-feedback"></div> - CSS 隐藏用
visibility: hidden; height: 0; overflow: hidden;，保留占位空间 - JS 只负责切换
class或修改textContent，绝不新增/删除节点
width/height 的 <img>，一段靠 JS 插入的 feedback，一个空 <div id="root"></div>，三者叠加，首屏 CLS 就很难压到 0.1 以下。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
