content-visibility: auto才是长列表性能优化的真正主力，它让浏览器跳过不可见区域的整个子树渲染，需搭配contain-intrinsic-size且仅对块级容器生效，伪元素仅能安全配合使用。
content-visibility 不是伪元素，但它常被误认为和 ::before/::after 一样“轻量”——其实它才是长列表性能优化的真正主力。伪元素本身不提升渲染性能，反而可能拖慢：每个 ::before 或 ::after 都会增加样式计算、布局和绘制负担，尤其在千级列表项中批量使用时。
为什么不能靠 ::before / ::after 优化长列表
伪元素本质是浏览器生成的匿名盒子，它参与完整的渲染流水线：
- 即使
content: ""，只要声明了::before，浏览器就得为其创建渲染对象（render object） - 若伪元素含
background-image、transform或动画，每项都触发独立的图层合成与绘制 - 在 1000 个
li::before的列表中，样式匹配耗时可能翻倍（尤其配合复杂选择器如.list > li:nth-child(odd)::before）
真正有效的 CSS 长列表性能方案只有 content-visibility: auto
它让浏览器跳过不可见区域的整个子树渲染（包括所有伪元素），且保留布局占位，是唯一能从根源减负的原生 CSS 机制：
- 必须搭配
contain-intrinsic-size，否则滚动时会因高度未知导致布局抖动（例如contain-intrinsic-size: 0 500px表示预估单个项高度为 500px） - 只对块级容器生效，不能直接写在
li上（需包裹一层div或用display: block显式声明） - 注意兼容性：
content-visibility在 Chrome 85+、Edge 85+、Firefox 103+ 支持；Safari 目前仍不支持（截至 2026 年 10 月）
伪元素能做的，只是“安全地配合” content-visibility
当主容器已启用 content-visibility: auto，伪元素就只在可见区域内被渲染，此时可放心使用，但要注意：
- 避免在伪元素中写
animation或transition，尤其是涉及width/height/top/left的属性（会强制重排） - 图标类伪元素优先用
mask-image或内联 SVG，比background-image更可控、更少解码开销 - 若需悬停反馈，用
opacity+transform组合，并加will-change: opacity, transform提示合成层
最易被忽略的一点：伪元素的“存在感”在 content-visibility: auto 下是动态的——它不会被预渲染，也不会缓存绘制结果。一旦列表项滚出视口，其 ::before 就彻底卸载；再滚回来，才重新创建并绘制。这个过程无法手动干预，只能靠合理设置 contain-intrinsic-size 和避免过度样式来保障复用效率。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
