骨架屏仅在首屏依赖异步数据且服务端返回空容器时适用；需结构一致、占位精准、零重排，通过节点复用安全替换，避免影响SEO。
骨架屏不是万能的，它只在首屏内容加载延迟明显时才值得加；盲目套用反而增加首屏体积、拖慢实际可交互时间。
什么时候该加 HTML 骨架屏，而不是等 JS 渲染
核心看两点：首屏是否依赖异步数据、服务端能否输出静态结构。如果页面靠 fetch 拉完数据再 render，且服务端返回的是空 <div id="app"></div>，那用户看到的就是白屏——这时骨架屏才有意义。
- 适合场景：
Vue/ReactSSR 未启用、或仅做了 CSR 的列表页/详情页 - 不适合场景：纯静态页、
Next.js/Nuxt已开启 SSR+静态生成、首屏内容 300ms 内能直出 - 注意：
HTML骨架屏必须和服务端模板耦合，不能靠 JS 插入——否则仍会闪一下白屏
HTML 骨架屏怎么写才不卡顿、不干扰真实内容
关键不是“画得像”，而是“结构一致、占位精准、零重排”。骨架元素必须和真实 DOM 具有相同盒模型（width/height/margin），否则真实内容挂载时会跳动。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
inline-block或flex布局，避免float或绝对定位（后者难以对齐） - 所有骨架块设固定尺寸，比如头像用
<div style="width:40px;height:40px;border-radius:50%;background:#f0f0f0"></div> - 文字行高、行数要匹配，用多个
<div style="height:16px;background:#f0f0f0;margin:8px 0"></div>模拟段落 - 禁止在骨架上加
transition或animation：CSS 动画会触发重绘，且和后续真实内容动画冲突
如何安全地替换骨架屏为真实内容
不能靠 innerHTML = ... 粗暴替换，否则会销毁骨架节点上的事件监听、表单状态甚至 input 光标位置。必须让真实组件“接管”已有 DOM 结构。
立即学习“前端免费学习笔记（深入）”；
- Vue：用
v-if控制显示逻辑，但骨架和真实组件需共享同一组key，确保复用节点 - React：用
{loading ? <Skeleton /> : <RealContent />}，且Skeleton必须返回和RealContent相同层级、同名 class 的 DOM 树 - 原生方案：用
document.querySelector找到骨架容器，再调用replaceChild替换，但务必保证新节点结构完全兼容旧节点的 CSS 选择器 - 错误示范：
document.getElementById('skeleton').innerHTML = '<h1>Hello</h1>'—— 这会清空所有子节点，包括可能已绑定的focus或scroll行为
最常被忽略的一点：骨架屏本身是 HTML，它会被搜索引擎抓取。如果骨架里塞了大量无意义的 <div> 和占位文本，可能影响 SEO 权重分配。真要用，就让它轻量、语义化，比如用 <header role="region" aria-busy="true"> 明确表达加载态，而不是堆砌 div。
