骨架屏需在路由切换开始时立即渲染，精准复现页面结构以避免布局偏移，并通过CSS动画平滑过渡到真实内容，关键页应定制轻量骨架组件。
路由懒加载配合骨架屏，核心是“视觉先行、内容后到”——用结构一致的灰阶占位图覆盖真实内容加载的空白期，让用户感知不到白屏，只觉得页面在自然浮现。
骨架屏要立刻出现，不能等 JS 下载完
懒加载触发（比如点击跳转）的瞬间，骨架屏就得渲染出来。如果等异步组件 JS 文件下载完成才显示骨架，中间仍有明显白屏。正确做法是：在路由切换开始时就激活骨架屏，而不是等 import() 返回 Promise 后再处理。
- Vue 中可在
<router-view></router-view>外层包裹骨架屏组件，并用v-if控制显隐，状态由路由元信息或全局 loading 标志驱动 - React 中直接把骨架屏传给
<suspense fallback></suspense>，天然契合懒加载生命周期，无需手动监听 Promise - 避免在
beforeRouteEnter里才开始加载骨架，应更早介入，比如在router.beforeEach中设置 loading 状态
骨架屏必须“长得像”，否则反而伤体验
骨架不是随便画几个灰色方块，它得精准复现目标页面的关键区块尺寸和布局节奏：标题栏高度、头像圆框大小、文字行数与段落间距、卡片数量与留白。否则真实内容一出现，页面会剧烈跳动（Layout Shift），用户视线被迫重新定位，焦虑感不降反升。
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 首屏关键区块（如导航栏、主标题）建议服务端直出骨架 HTML，实现“零延迟可见”
- 骨架组件本身要轻量：优先用纯 CSS 实现（
background: linear-gradient()+animation），避免引入外部字体、图片或额外请求 - 移动端需适配不同屏幕宽度，骨架宽高比必须跟随视口动态调整，不能写死像素值
过渡要平滑，显隐时机得卡准
骨架屏不是一上一下就完事，它和真实内容之间要有明确的衔接节奏。理想状态是：骨架淡入 → 内容淡入同时骨架淡出 → 内容完全展示后骨架彻底隐藏。整个过程无闪烁、无重叠、无残留。
立即学习“前端免费学习笔记（深入）”；
- 推荐用 CSS
opacity+transition实现渐隐渐显，动画时长控制在 300–500ms - 真实组件挂载完成（
onMounted或useEffect）后才触发骨架隐藏，不能靠定时器硬等 - 若接口请求比组件加载更慢，骨架屏应持续显示，直到数据就绪；此时骨架是“等待内容”，不是“等待代码”
关键路由优先定制，别全靠通用骨架
首页、商品列表、用户详情这类高频访问页，值得单独开发匹配度更高的骨架组件；而“关于我们”“帮助中心”等低频页，可用极简通用骨架甚至回退到基础 loading 指示器，避免为次要路径增加维护成本和包体积。
- 为每个懒加载路由配置
meta: { skeleton: 'UserProfileSkeleton' }，在<router-view></router-view>渲染逻辑中动态 resolve - Webpack 或 Vite 构建时，确保骨架组件也走代码分割，不打入主包
- 对弱网用户（
navigator.connection.effectiveType === '2g'），可自动跳过复杂骨架，直出文字 loading，防止骨架本身加载变慢加重白屏感
