骨架屏本身不直接减少CLS，而是通过尺寸预留、容器隔离和DOM插入控制将不可控布局跳变转为可控占位渲染；其有效前提是骨架与真实内容在层级、盒模型尺寸上严格对齐，否则仍会触发CLS。
骨架屏本身不直接“减少”CLS，它只是把不可控的布局跳变，换成可控的占位渲染；真正起作用的是你用骨架屏时同步做的尺寸预留、容器隔离和DOM插入控制。
为什么骨架屏能缓解CLS，但不是万能解药
CLS统计的是「意外且无用户触发」的布局偏移。骨架屏之所以有效，是因为它把原本 JS 动态插入内容导致的 height: 0 → auto 突然撑开，替换成了一个有明确高度/宽高比的占位容器——只要这个容器的尺寸与最终内容一致，浏览器就无需重排。
- ❌ 错误用法：只加灰色背景动画，但容器没设
min-height或aspect-ratio，加载后照样跳 - ✅ 正确前提：骨架结构必须与真实 DOM 节点层级、盒模型尺寸（尤其是高度）严格对齐
- ⚠️ 注意：单页应用中，路由切换后新页面的骨架若没及时销毁旧占位，可能被计入前一页 CLS 总和
HTML + CSS 骨架屏实现的关键写法
不要依赖 JS 渲染骨架；优先在 HTML 源码里写好占位结构，并用内联样式锁定关键尺寸。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 图片区域用
<div class="skeleton-img" style="aspect-ratio: 16/9; width: 100%;"></div>，而非空<img>标签 - 文字行用带
height和width的<div>模拟，例如：<div class="skeleton-line" style="height: 1.2em; width: 80%;"></div> - 广告或评论模块容器必须带
min-height，比如<div class="ad-skeleton" style="min-height: 250px;"></div> - 避免在骨架上用
padding-top百分比模拟宽高比——它依赖父容器宽度，容易在 flex/grid 中失效
JS 控制显示/隐藏时的三个雷区
骨架屏是否触发 CLS，不取决于它长什么样，而取决于它怎么消失、以及消失后内容怎么出现。
立即学习“前端免费学习笔记（深入）”；
- ❌ 直接
el.remove()或el.innerHTML = realContent：DOM 替换会强制重排，尤其当realContent高度与骨架不一致时 - ✅ 推荐做法：用
opacity: 0 → 1+visibility: hidden → visible过渡，同时确保真实内容容器与骨架容器是同一个 DOM 节点 - ⚠️ SPA 场景下，必须在路由进入前调用
getCLS({ reportAllChanges: true })并监听navigation事件，在切换时手动reset() - 额外建议：给骨架容器加
contain: layout style paint，限制其内部重排不影响外部布局（Chrome 85+ 支持）
最常被忽略的一点：骨架屏的「尺寸守恒」比动画更重要。哪怕动画再精致，只要骨架高度比真实内容矮 1px，或者宽高比算错导致响应式断点处撑开，CLS 就会如实记下这笔账。
