content-visibility 与 contain-intrinsic-size 列表渲染性能优化实践

content-visibility 与 contain-intrinsic-size 列表渲染性能优化实践概述对于长列表与复杂组件，`content-visibility: auto` 可延迟不可见内容的布局与绘制，配合 `contain-intrinsic-size` 提供合理占位，显著改善首屏与滚动性能。实践示例.item { content-visibility: auto; contain-intrinsic-size: 200px; contain: layout style paint; } .item[data-expanded="true"] { content-visibility: visible; } 验证方法测试环境：Windows 11 / macOS 14；Chrome 102+ / Edge；Safari 16+（部分行为差异）。指标：观察首屏 `LCP/FCP` 与滚动帧率；工具：Performance 面板查看布局与绘制时间线；注意事项合理设置 `contain-intrinsic-size`，避免跳动与不合理占位。与虚拟列表/懒加载协作，避免重复优化导致复杂度过高。对可见性切换提供一致的状态管理，防止闪烁。