骨架屏渲染塌陷是因为未设宽高或aspect-ratio，导致0×0渲染引发重排；应设aspect-ratio、line-height、overflow:hidden，共存dom结构并用replacewith替换，流光动画用background-position，无限滚动需结构一致与语义规范。
为什么骨架屏一渲染就塌掉、文字挤成一团
90% 的闪烁变形，是因为骨架元素没设 width 和 height（或 aspect-ratio），只靠 background-color 是撑不开流式布局的。浏览器把空 div 当作 0×0 渲染，真实内容插入时必然重排、跳动。
实操建议：
- 图片占位必须用
aspect-ratio: 16 / 9（现代浏览器）或padding-top: 56.25%+position: relative+ 子元素position: absolute - 文字行占位必须用
line-height × 行数设定高度，禁用height: 100%（父容器无高时失效） - 所有骨架块都要加
overflow: hidden，否则渐变动画会溢出圆角边界 - 禁用
visibility: hidden或v-show控制显隐——它们仍参与布局计算，SSR hydration 时会错位
display: none 切换骨架屏为什么会导致布局跳变
用 display: none 隐藏骨架层，会让该元素彻底退出文档流，真实内容渲染时“突然插入”，触发重排；而用户看到的是“灰块消失 → 白屏 → 内容闪入”的三段式抖动。
正确做法是让骨架和真实内容共存于同一 DOM 层级，仅通过 display: none 切换彼此可见性，且二者结构、尺寸、class 名必须完全一致：
- 骨架结构必须和真实列表项 DOM 结构严格对齐：同级元素数量、
class名、属性名（如data-id）、甚至注释位置都应一致 - 推荐用
<template></template>+replaceWith()替换整块，而不是innerHTML = ''再拼字符串——后者会丢事件监听、表单值、滚动位置 - 移除骨架时务必调用
element.remove()，而非仅设display: none，否则动画仍在后台跑，长期驻留影响页签性能
linear-gradient 流光动画怎么写才不掉帧、不卡顿
用 opacity 或 transform: translateX() 做骨架流动效果，在低端设备上容易掉帧；而仅靠 background-position 横向移动，是 GPU 合成友好的动画方式，且不触发重绘。
关键参数不能错：
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)-
background-size: 200% 100%（至少 200%，否则平移时露底色） - @keyframes 中写
0% { background-position: -200% 0; } 100% { background-position: 200% 0; }，不能只写0% → 100% - 动画时长控制在
1.5s–2s，animation-timing-function: linear（ease-in-out会让光效停顿感明显） - 低配设备需加
@media (prefers-reduced-motion: reduce) { animation: none; }兜底
无限滚动中骨架接续卡顿、漏加载的根本原因
不是 IntersectionObserver 写错了，而是骨架项和真实列表项结构不一致，导致框架 hydration 或手动替换时 focus 断掉、状态清空、第三方插件未重初始化。
必须守住三条线：
- 页尾触发占位符（如
<div id="infinite-trigger"></div>）必须独立于骨架列表之外，且不参与骨架动画，否则IntersectionObserver会误判可见性 - 服务端返回数据必须带
hasMore: true/false，前端据此决定是否继续挂载 observer；一次加载中要加防抖，忽略后续触发 - DOM 替换必须保持骨架与真实内容结构、
class、层级严格一致；推荐用<template></template>+replaceWith()，避免字符串拼接
最易被忽略的点：骨架区域整体应包裹在 role="region" + aria-busy="true" 中，但内部子元素不要重复加 aria- 属性——语义污染比视觉抖动更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
