img 和 iframe 必须带 width/height 属性，否则浏览器无法推算固有尺寸导致 CLS 抖动；SVG 必须带 viewBox 及显式宽高；feedback 容器需硬编码在 HTML 中并用 visibility:hidden 占位；模态框开启时需用 margin-right 补滚动条宽度。
img 和 iframe 必须带 width/height 属性，不写就是抖动源头
浏览器解析 HTML 时，<img> 或 <iframe> 缺少 width 和 height 属性，就无法推算固有尺寸，初始占位为 0×0 或行内默认值。等资源加载完成才重排，下方所有流内元素立刻被顶下去——这是 CLS 最高频、最直接的触发点。
- 即使加了
max-width: 100% 或 aspect-ratio: 16/9，也不能替代 HTML 层的 width/height；旧版 Safari 和部分 Chrome 首帧仍可能 fallback 到无占位状态
-
srcset + sizes 场景下仍要配 width/height，否则浏览器可能先按默认尺寸占位再调整，造成两次偏移
- 懒加载（
loading="lazy"）会放大风险：图片在用户滚动到视口时才触发重排，抖动感知更强
- 示例必须写成：
<img src="a.jpg" width="640" height="480">，数值哪怕只是近似宽高比也比空着强
SVG 必须带 viewBox，显式 width/height 更稳妥<svg> 不写 viewBox，或只写 viewBox 不写 width/height，某些场景（尤其旧版 Safari）会 fallback 到 300×150 默认渲染，再缩放——这等于引入一次重排。
-
viewBox 是 SVG 尺寸语义的基础，没有它，width/height 就失去参照系
- 显式设
width 和 height 能让浏览器首帧即知渲染边界，避免依赖 CSS 补救
- 错误写法：
<svg>...</svg> 或 <svg viewBox="0 0 640 480">...</svg>
- 推荐写法：
<svg viewBox="0 0 640 480" width="640" height="480">...</svg>
feedback 容器必须硬编码在 HTML 中，不能 JS 动态插入
表单校验失败后用 JS appendChild 插入提示 <div>，等于在流式布局里硬塞新节点——下方所有内容立刻下移，不是动画抖，是结构塌陷。
- 反馈容器必须作为
<input> 的紧邻兄弟节点，写死在 HTML 源码里
- 隐藏方式只能是：
visibility: hidden; height: 0; overflow: hidden;，绝不能用 display: none（会导致父容器高度塌缩）
- 若父容器是 flex/grid，给 feedback 区设
min-height: 1.2em，保底占位不破坏行高
- 移动端需额外加
touch-action: none 和临时禁用 pointer-events，防止抖动期间误触
模态框开启时 body 宽度突变，靠 margin-right 补滚动条宽度
模态框一开，body 滚动条消失，可用宽度瞬间增大，右侧内容左移——这不是样式问题，是结构级宽度重计算。
- 仅靠
overflow: hidden 简单禁用滚动条，只会让抖动更明显
- 正确做法：先读
document.body.offsetWidth，再设 document.body.style.overflow = 'hidden'，再读一次 offsetWidth，差值即滚动条宽度
- 用
document.body.style.marginRight = '${scrollBarWidth}px' 锁住宽度
- 关闭模态框时，必须清掉
marginRight 和 overflow，否则后续滚动行为异常
max-width: 100% 或 aspect-ratio: 16/9，也不能替代 HTML 层的 width/height；旧版 Safari 和部分 Chrome 首帧仍可能 fallback 到无占位状态 srcset + sizes 场景下仍要配 width/height，否则浏览器可能先按默认尺寸占位再调整，造成两次偏移 loading="lazy"）会放大风险：图片在用户滚动到视口时才触发重排，抖动感知更强 <img src="a.jpg" width="640" height="480">，数值哪怕只是近似宽高比也比空着强 <svg> 不写 viewBox，或只写 viewBox 不写 width/height，某些场景（尤其旧版 Safari）会 fallback 到 300×150 默认渲染，再缩放——这等于引入一次重排。
-
viewBox是 SVG 尺寸语义的基础，没有它，width/height就失去参照系 - 显式设
width和height能让浏览器首帧即知渲染边界，避免依赖 CSS 补救 - 错误写法：
<svg>...</svg>或<svg viewBox="0 0 640 480">...</svg> - 推荐写法：
<svg viewBox="0 0 640 480" width="640" height="480">...</svg>
feedback 容器必须硬编码在 HTML 中，不能 JS 动态插入
表单校验失败后用 JS appendChild 插入提示 <div>，等于在流式布局里硬塞新节点——下方所有内容立刻下移，不是动画抖，是结构塌陷。
- 反馈容器必须作为
<input> 的紧邻兄弟节点，写死在 HTML 源码里
- 隐藏方式只能是：
visibility: hidden; height: 0; overflow: hidden;，绝不能用 display: none（会导致父容器高度塌缩）
- 若父容器是 flex/grid，给 feedback 区设
min-height: 1.2em，保底占位不破坏行高
- 移动端需额外加
touch-action: none 和临时禁用 pointer-events，防止抖动期间误触
模态框开启时 body 宽度突变，靠 margin-right 补滚动条宽度
模态框一开，body 滚动条消失，可用宽度瞬间增大，右侧内容左移——这不是样式问题，是结构级宽度重计算。
- 仅靠
overflow: hidden 简单禁用滚动条，只会让抖动更明显
- 正确做法：先读
document.body.offsetWidth，再设 document.body.style.overflow = 'hidden'，再读一次 offsetWidth，差值即滚动条宽度
- 用
document.body.style.marginRight = '${scrollBarWidth}px' 锁住宽度
- 关闭模态框时，必须清掉
marginRight 和 overflow，否则后续滚动行为异常
<input> 的紧邻兄弟节点，写死在 HTML 源码里 visibility: hidden; height: 0; overflow: hidden;，绝不能用 display: none（会导致父容器高度塌缩） min-height: 1.2em，保底占位不破坏行高 touch-action: none 和临时禁用 pointer-events，防止抖动期间误触 body 滚动条消失，可用宽度瞬间增大，右侧内容左移——这不是样式问题，是结构级宽度重计算。
- 仅靠
overflow: hidden简单禁用滚动条，只会让抖动更明显 - 正确做法：先读
document.body.offsetWidth，再设document.body.style.overflow = 'hidden'，再读一次 offsetWidth，差值即滚动条宽度 - 用
document.body.style.marginRight = '${scrollBarWidth}px'锁住宽度 - 关闭模态框时，必须清掉
marginRight和overflow，否则后续滚动行为异常
复杂点在于：这些占位逻辑不是“可选优化”，而是 HTML 结构层面的确定性声明。一旦漏掉，浏览器在首次绘制前就失去了尺寸锚点，后续所有 CSS 补救都只是延缓抖动，而非根除。
