移动端长列表卡顿主因是HTML结构与布局策略不当，优化应优先精简DOM嵌套、显式设置滚动容器高度、正确配置content-visibility与contain-intrinsic-size。
移动端长列表卡顿，80%以上不是 JS 逻辑问题，而是 HTML 结构和布局策略本身在拖慢渲染——直接改 DOM 层级和容器行为，比加虚拟滚动更早见效。
为什么深层嵌套会让长列表变卡
浏览器解析一个 <div><div><div><div><li>... 结构时，每层 div 都要参与样式计算、继承链判断、布局树构建。嵌套超 4 层后，首屏 layout 耗时呈线性上升；滚动中触发重排时，影响范围会指数扩大。
- 检查开发者工具的 “Layers” 面板：如果看到大量小尺寸、堆叠的合成层，基本就是嵌套 +
position: relative滥用导致 - 语义标签如
<main>、<section>、<article>不仅可读性强，还能让浏览器跳过部分继承链推导 - 避免用
div包裹ul再包li再包div—— 直接让ul做 flex 容器，li设为display: flex，砍掉两层无意义 wrapper
滚动容器必须显式设高 + overflow-y: auto
这是所有优化（包括 content-visibility 和虚拟列表）生效的前提。不满足这个条件，scrollTop 会跳变或归零，后续所有索引计算全失效。
- 错误写法：
height: auto、min-height: 600px、父级display: flex且未设flex: 1 - 正确写法：
height: 600px; overflow-y: auto;，且该元素不能被任何overflow: hidden父级裁剪 - Vue 中若用
v-virtual-scroll，确认插件文档是否要求 wrapper 元素显式设高；React 中用ref绑定，必须指向这个带overflow的容器，不是外层 wrapper
content-visibility: auto 必须配 contain-intrinsic-size
单独加 content-visibility: auto 等于没加，甚至更糟：未渲染项高度为 0，滚动条突然收缩、内容上跳、读屏器漏读，用户手指定位直接错乱。
立即学习“前端免费学习笔记（深入）”；
-
contain-intrinsic-size值应尽量接近单个列表项真实高度（如卡片固定高120px，就写120px） - 高度不固定时（如含多行文字），取保守估计值（如
160px），宁大勿小；不能依赖子元素的height或min-height - 禁止写成
contain-intrinsic-size: 0或留空——Chrome 和 Safari 都不认auto或空值，等于白设 - Firefox Android 和 iOS ≤ 16.4 不支持，需用
@supports (content-visibility: auto)做降级
Flex/Grid 容器里设 content-visibility 要小心对齐
Flex 容器默认 align-items: stretch，但设了 content-visibility: auto 的子项高度为 0，会导致基线对齐异常、项被压扁或错位。
- Flex 场景下，父容器加
align-items: flex-start，避免子项因高度 0 被拉伸或压缩 - Grid 场景下，建议对每个 grid item 单独设
contain-intrinsic-size，而不是只在父容器设content-visibility - 不要混用
content-visibility: auto和display: none：前者保留占位、无障碍友好；后者移除空间、破坏缓存机制，JSgetBoundingClientRect()返回全 0
真正卡顿的点往往藏在结构最底层：一个没设高的滚动容器、一层多余的 div、或者 contain-intrinsic-size 写成了 0 —— 这些地方改完，可能连虚拟滚动都不用上了。
