通过设置 content-visibility: auto 并配合 auto-focussable 或 contain-intrinsic-size，浏览器可以跳过不可见 dom 节点的样式计算、布局与绘制，从而极大提升长列表性能。具体做法是在列表项容器上应用该属性，确保在滚动进入视口前不进行重排，同时预留空间避免页面抖动。
content-visibility 如何改变渲染管线开销？
启用 content-visibility: auto 后，当元素不在视口内时，浏览器会完全跳过其内部的 CSS 样式解析、层叠计算以及几何布局（Layout）阶段。这意味着即使列表项内部包含复杂的嵌套结构或大量文本，只要被隐藏，就不会消耗 CPU 进行重排。这种优化直接减少了主线程的工作量，使得初始加载和滚动交互更加流畅。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Content Visibility Demo</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 20px;
}
.list-container {
height: 300px;
overflow-y: auto;
border: 1px solid #ccc;
}
.list-item {
content-visibility: auto;
contain-intrinsic-size: 0 150px; /* 高度预估 */
border-bottom: 1px solid #eee;
padding: 20px;
background: #fff;
}
.list-item:nth-child(even) {
background: #f9f9f9;
}
</style>
</head>
<body>
<div class="list-container" id="container">
<!-- 由 JS 生成 1000 个列表项 -->
</div>
<script>
const container = document.getElementById('container');
for (let i = 0; i < 1000; i++) {
const item = document.createElement('div');
item.className = 'list-item';
item.textContent = `Item ${i + 1}: This is a long list item with some content to simulate complexity.`;
container.appendChild(item);
}
</script>
</body>
</html>
为什么需要 contain-intrinsic-size 防止布局抖动？
当 content-visibility 隐藏元素内容时，如果未指定尺寸，浏览器可能将其视为零高度，导致后续元素向上移动，造成视觉上的“跳动”。通过设置 contain-intrinsic-size，可以为隐藏的元素提供一个占位高度。这样在元素进入视口之前，文档流已经保留了正确的空间，用户滚动时不会出现布局偏移。这个属性允许你指定一个最小值和一个理想值，通常设置为列表项的实际平均高度即可。
立即学习“前端免费学习笔记（深入）”；
<style>
.list-item {
content-visibility: auto;
/* 格式: width height */
/* 这里假设每个列表项高度约为 150px */
contain-intrinsic-size: 0 150px;
}
</style>
当列表项包含固定定位子元素时会发生什么？
如果列表项内部包含 position: fixed 的子元素，这些子元素可能会因为父元素的 content-visibility: hidden 状态而出现渲染异常或无法正确显示。这是因为固定定位元素相对于视口定位，但其可见性受父级 content-visibility 的影响。在某些浏览器实现中，隐藏的 content-visibility 容器内的固定定位元素可能被错误地裁剪或不参与渲染。解决此问题通常需要避免在可隐藏容器中放置固定定位元素，或者使用 isolation: isolate 等技巧隔离层叠上下文，但最稳妥的方式是确保固定定位元素位于 content-visibility 容器之外。
