纯HTML+CSS骨架屏需用带宽高（或aspect-ratio）的div模拟结构，配合linear-gradient背景动画实现加载效果；无限滚动应使用IntersectionObserver监听页尾占位符并设rootMargin提前触发；DOM替换须保持骨架与真实内容结构、class严格一致，推荐template+replaceWith；低配设备需will-change优化动画并设置prefers-reduced-motion兜底。
怎么用 HTML + CSS 实现骨架屏占位（不依赖 JS）
纯 HTML 能做的骨架屏，本质是「视觉占位」，不是真正的数据加载逻辑。它只负责在内容还没来时，撑开容器、避免布局抖动。关键在于用 <div> 模拟结构，配合 background 渐变动画模拟“加载中”效果。
常见错误是直接塞一堆空 <p> 或 <span>，没设宽高，导致骨架一渲染就塌掉、文字挤成一团；或者用 opacity: 0 隐藏真实内容，但没预留空间，照样抖。
- 必须给每个骨架元素设置明确的
width和height（或aspect-ratio），不能靠内容撑开 - 用
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)+background-size: 200% 100%+animation做流动灰度效果 - 避免用
display: none切换骨架和真实内容——该元素会从流式布局中消失，引发重排；改用visibility: hidden或opacity: 0+pointer-events: none
无限滚动触发点怎么定才不卡、不漏
无限滚动不是“滚到底就发请求”，而是提前在用户快到底时预加载。触发时机太晚，用户会看到空白；太早，可能白发请求、积压未用数据。
典型错误是监听 window.onscroll 并每次算 scrollTop + innerHeight >= document.body.scrollHeight，这在快速滚动时高频触发、性能差，还容易因 DOM 更新延迟误判“已到底”。
立即学习“前端免费学习笔记（深入）”；
- 用
IntersectionObserver监听页尾占位符（一个<div id="infinite-trigger">），比手动算位置更稳定、不卡顿 - 把触发阈值设为
{ rootMargin: '200px' }，即距离底部还有 200px 就开始加载，留出网络与渲染缓冲 - 加防抖：一次加载中，忽略后续触发；加载完再重新 observe，避免重复请求
- 服务端必须支持分页参数（如
?page=2&size=10），且返回数据带hasMore: true/false，前端据此决定是否继续挂载 observer
骨架屏和真实内容切换时的 DOM 替换陷阱
很多人用 innerHTML = '' 清空骨架再插入新 HTML，结果 Vue/React 组件丢失状态、第三方插件（如代码高亮、图表）没重初始化、focus 状态断掉。
这不是 HTML 本身的问题，而是替换方式粗暴。骨架屏结构要和真实内容 DOM 结构严格对齐（同级元素数量、class 名、data 属性），才能让框架 diff 正确、浏览器复用节点。
- 骨架元素的
class必须和真实内容一致，比如真实卡片是<article class="card">，骨架就得是<div class="card"></div></li> <li>不要用 <code>document.write()
或outerHTML替换整块区域——会销毁子节点所有绑定事件和内部状态 - 推荐做法：骨架用
<template id="skeleton-card">存起来，加载完成后用replaceWith()或replaceChildren()替换，保留父容器引用 - 如果用了 Web Components 或自定义元素，确保骨架节点也包含
is属性或正确customElements.define()，否则升级失败
CSS 动画在低配设备上卡顿怎么办
骨架屏的流动背景动画在旧安卓机、低端 iOS 上常掉帧，甚至直接卡死页面滚动。这不是代码写错了，是硬件加速没生效或动画属性触发了重排。
错误做法是给骨架加 transform: translateX(0) 强制 GPU 加速——没用，因为 background-position 动画本身不走 GPU，且 translateX 对 <div> 无意义。
- 真正有效的加速方式：用
will-change: background-position提前告知浏览器该属性会变（仅在动画期间加，用完移除） - 动画时长别设太短，
animation-duration: 1.5s比0.8s更稳；用ease-in-out而非linear减少突变压力 - 禁用动画的兜底方案：媒体查询
@media (prefers-reduced-motion: reduce)下直接关掉animation，用静态灰块代替 - 别在一个列表里同时跑 50 个骨架动画——用 CSS
animation-delay错峰启动，或 JS 控制只激活视口内 3～5 个
最易被忽略的是：骨架屏结构一旦嵌套过深（比如四层 <div> 包着一个头像占位），哪怕只是静态，也会拖慢首次渲染。能扁平就扁平，能用伪元素替代就不用额外标签。
