移动端骨架屏必须随首包HTML服务端同步输出，禁用缓冲并声明明确尺寸，使用background-position动画和opacity+transform显隐，确保比JS更早存在、比字体更稳、比CPU更轻。
移动端骨架屏必须随首包 HTML 一起输出
服务端不提前 flush 骨架结构，移动端白屏就无法避免。用户看到的不是“灰→实”，而是“白→灰→实”三段式渲染，CLS 和 LCP 直接恶化。
常见错误是等 DOMContentLoaded 或框架 mounted 钩子才插入骨架 DOM——此时 JS 还没执行完，首屏已白屏超 1.5s。
- Node.js（Express）中用
res.write()输出后立即res.flush() - Next.js 使用
loading.tsx时，确保它在 SSR 阶段被同步渲染，而非仅客户端 fallback - 禁用 PHP 的
ob_start()、Java 模板的全量缓冲，否则骨架永远卡在服务端内存里
所有骨架元素必须声明明确尺寸，不能依赖内容撑开
移动端 viewport 缩放、字体加载延迟、DPR 变化都会放大尺寸不确定性。只设 background-color 或 width: 100% 的骨架块，在 iOS Safari 或低端安卓机上几乎必然塌陷。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 图片占位统一用
aspect-ratio: 16 / 9（现代浏览器）或padding-top: 56.25%+position: relative+ 子元素position: absolute - 文字行高用固定
height+line-height，例如 2 行标题：height: 48px; line-height: 24px;，禁用height: 100% - 所有骨架容器加
overflow: hidden，否则圆角+渐变动画会溢出边界
动画必须用 background-position，且禁用 ease-in-out
移动端 GPU 资源紧张，opacity 或 transform 动画极易掉帧；而 background-position 是合成友好的，不触发重绘。
- 正确写法：
@keyframes loading { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } - 必须配
background-size: 200% 100%，且动画用linear，ease-in-out会在中间停顿，光效“卡住”感明显 - 加兜底：
@media (prefers-reduced-motion: reduce) { animation: none; }，否则无障碍用户会被持续流动干扰
显隐切换必须用 opacity + transform，绝不用 display 或 visibility
移动端 hydration 错位最常见原因，就是用 v-show 或 visibility: hidden 控制骨架显隐——它们仍参与布局计算，SSR 与 CSR 结构稍有差异就会闪一下。
- 真实内容加载后，给骨架节点加
opacity: 0; transform: translateY(-10px);，配合 CSS transition - 用
data-skeleton="true"标记初始骨架，JS 只改属性值，不替换或删除 DOM 节点 - 无限滚动场景下，新骨架块插入前需清空旧动画状态：
animation: none;再重设，否则接续卡顿
关键不在“有没有骨架”，而在“骨架是否比 JS 更早存在、尺寸是否比字体更稳、动画是否比 CPU 更轻”。任何环节松动，移动端用户看到的就是一次可感知的布局抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
