移动端长列表卡顿主因是HTML结构与布局策略不当，优化应优先精简DOM嵌套、显式设置滚动容器高度、正确配置content-visibility与contain-intrinsic-size。

移动端长列表卡顿，80%以上不是 JS 逻辑问题，而是 HTML 结构和布局策略本身在拖慢渲染——直接改 DOM 层级和容器行为，比加虚拟滚动更早见效。

为什么深层嵌套会让长列表变卡

浏览器解析一个

... 结构时，每层 div 都要参与样式计算、继承链判断、布局树构建。嵌套超 4 层后，首屏 layout 耗时呈线性上升；滚动中触发重排时，影响范围会指数扩大。

• 检查开发者工具的 “Layers” 面板：如果看到大量小尺寸、堆叠的合成层，基本就是嵌套 + position: relative 滥用导致
• 语义标签如
  、
  、
  不仅可读性强，还能让浏览器跳过部分继承链推导
• 避免用 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，滚动条突然收缩、内容上跳、读屏器漏读，用户手指定位直接错乱。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 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：前者保留占位、无障碍友好；后者移除空间、破坏缓存机制，JS getBoundingClientRect() 返回全 0

真正卡顿的点往往藏在结构最底层：一个没设高的滚动容器、一层多余的 div、或者 contain-intrinsic-size 写成了 0 —— 这些地方改完，可能连虚拟滚动都不用上了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！