HTML骨架本身不触发占位加载，它只是静态结构；真正实现需SSR输出骨架、JS懒加载、CSS动画（如linear-gradient背景动画）、资源调度及服务端同步数据状态，且骨架与真实DOM结构必须一致。
HTML骨架本身不触发占位加载，但它是占位加载的前提
骨架屏（skeleton screen）不是浏览器原生能力，HTML 骨架本身不会自动“占位加载”——它只是静态结构。真正起作用的是你用它配合的策略：服务端渲染（SSR）输出初始骨架、前端 JS 懒加载真实内容、CSS 控制骨架样式（比如 background-image 渐变或 animation 模拟波纹）、再配合 IntersectionObserver 或 loading="lazy" 控制资源加载时机。
如果只写个空 <div class="skeleton"></div> 就扔在页面里，没样式、没 JS、没资源调度，那它就是个空白块，和占位加载毫无关系。
用 CSS 实现骨架动画时，background-image 比伪元素更稳
常见错误是用 ::before + transform: translateX() 做扫描光效，结果在低端 Android 或旧版 Safari 上卡顿甚至失效。更可靠的做法是用 linear-gradient 配合 background-size 和 background-position 动画：
`.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
to { background-position: 200% 0; }
}`
-
background-image方案兼容性更好，连 IE10 都支持 - 避免使用
transform动画，尤其在position: absolute元素上容易触发重排 - 别给骨架元素设
opacity: 0再fade-in，这会让占位区域闪一下——应该让骨架始终可见，真实内容覆盖时自然替换
SSR 输出骨架时，必须同步注入数据加载状态
Node.js 服务端（如 Express + EJS）吐出骨架 HTML 的同时，得把当前页面所需的数据请求状态也塞进去，否则前端 hydration 会失败或重复拉取。典型做法是：
立即学习“前端免费学习笔记（深入）”；
- 在服务端预执行数据获取逻辑（哪怕只 mock），生成
window.__INITIAL_DATA__ = {...} - 骨架模板里用
<script>标签内联该对象，确保 JS 加载后能立刻读取 - 前端 React/Vue 初始化时，优先读
window.__INITIAL_DATA__，没命中才发起网络请求 - 切忌在 SSR 模板里直接写
fetch(...)—— Node 环境没有fetch，要用node-fetch或axios
骨架与真实 DOM 结构不一致会导致 hydration 错误
Vue/React 在客户端“激活”（hydrate）时，会逐节点比对服务端 HTML 和前端虚拟 DOM。如果骨架里写的是 <div class="skeleton-card"></div>，而真实组件渲染出来是 <article class="card">...，就会触发 Hydration failed because the server rendered HTML didn't match the client 警告，甚至丢弃整个区块。
解决方法很简单但常被忽略：
- 骨架结构必须和真实组件的根元素类型、class、key 层级完全一致
- 推荐用真实组件的“简化版”作为骨架，比如把
<img src="...">换成<div class="skeleton-img"></div>，但保留class="card"和外层<article> - 不要在骨架里加额外 wrapper div，除非真实组件也带
骨架不是设计稿截图，它是可 hydrate 的、语义对齐的 HTML 占位符——差一个 class，就可能让首屏白屏几秒。
