HTML占位标签是防抖动、压CLS、保首屏稳定的核心基建；img/iframe必须用HTML属性声明width/height，SVG需带viewBox及显式宽高，反馈容器和模态框须硬编码占位，骨架屏必须服务端直出。
HTML占位标签不是“锦上添花”的装饰，而是防抖动、压CLS、保首屏稳定的核心基建。没写 width 和 height 的 <img alt="怎么用好HTML占位标签提升性能？防止布局抖动" >，或没带 viewBox 的 <svg></svg>，本质就是埋在 DOM 里的抖动引信。
img 和 iframe 必须显式声明 width/height 属性
浏览器解析 HTML 时，若 <img alt="怎么用好HTML占位标签提升性能？防止布局抖动" > 缺少 width 和 height 属性，初始渲染占位为 0×0；图片加载完成瞬间重排，下方所有流内元素被顶下去——这不是动画慢，是结构缺失导致的强制重排。
-
width和height必须是 HTML 属性（即写在标签里），style="width: 100%; height: auto"或aspect-ratio无法替代首帧占位 - 哪怕数值只是近似宽高比（如
<img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="怎么用好HTML占位标签提升性能？防止布局抖动" >），也比空着强 -
<iframe></iframe>同理：必须写<iframe width="560" height="315"></iframe>；CSS 设置无效，懒加载时抖动感知更强 - 第三方广告位不可预知尺寸？用
<div id="ad-slot" style="min-height: 250px"></div>在 HTML 源码中硬占位，高度取历史均值
SVG 必须带 viewBox 且推荐显式宽高
不写 viewBox 的 <svg></svg>，旧版 Safari 可能 fallback 到 300×150 默认尺寸，再缩放——等于引入一次重排；只写 viewBox 不写 width/height，某些渲染路径仍可能丢失固有尺寸语义。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 错误写法：
<svg></svg>或<svg viewbox="0 0 640 480"></svg> - 推荐写法：
<svg viewbox="0 0 640 480" width="640" height="480"></svg> - 若 SVG 是响应式容器内嵌，
width="100%"+height="100%"配合viewBox依然安全，但需确保父容器有明确尺寸约束
反馈容器和模态框要硬编码占位结构
表单校验失败后用 JS 动态插入 <div class="error">，等于在流式布局里突然塞新节点，下方内容立刻下移——这不是动画问题，是 DOM 结构塌陷。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>反馈容器必须作为 <code><input> 的紧邻兄弟节点，写死在 HTML 源码中
visibility: hidden; height: 0; overflow: hidden;，禁用 display: none（会导致父容器高度塌缩）html { overflow-y: scroll } 锁定视口宽度，或在开框时用 document.body.style.marginRight = '17px' 补滚动条宽度骨架屏必须服务端直出，不能靠 JS 插入
很多团队用 useState 控制骨架屏显隐，结果骨架等 JS 下载、解析、执行完才出现——这反而延长了用户第一眼看到内容的时间。真正有效的骨架屏，必须和服务端 HTML 一起输出，初始可见、占位、参与布局流。
- 服务端返回的骨架结构必须和真实 DOM 结构一致（如卡片列表页，返回
<div class="card skeleton">...</div>） - 骨架元素禁用
visibility: hidden—— 它保留空间但不可见，JS 显示瞬间若样式未就绪，会闪出原始文字 - 真实内容加载后，用
opacity: 0 → 1切换，配合transition: opacity 0.3s ease，避免硬切 - 客户端 hydration 前骨架已存在，hydration 后直接替换节点，不触发重排；若服务端没输出骨架，客户端 JS 才插入，就会闪一下
最常被忽略的点是：所有占位行为都必须发生在 HTML 解析阶段，而不是 JS 执行之后。一旦你把占位逻辑交给 JS，就已经晚了——浏览器首帧已经画完了空白或错位的页面。
