咳咳，各位观众老爷们，晚上好！我是你们的老朋友，BUG终结者。今天咱不聊风花雪月，就来唠唠CSS界的一位低调英雄，一个能让你页面性能起飞的“秘密武器”——content-visibility。
这玩意儿啊，说白了，就是个“选择性渲染”的开关。想象一下，你有一个超长的页面，用户可能只会看到屏幕上的那一小块，但浏览器却傻乎乎地把整个页面都渲染了。这得多浪费资源啊！content-visibility的作用，就是告诉浏览器：“嘿，哥们儿，先别急着渲染那些看不到的东西，等用户快滑到那儿了，你再动手也不迟。”
第一幕：content-visibility: visible;——“我啥也没干”
这个值是默认值，相当于啥也没设置。浏览器会像往常一样，兢兢业业地把所有内容都渲染出来。
.my-element {
content-visibility: visible; /* 默认值，和没写一样 */
}别看它好像没啥用，但它是我们理解content-visibility的起点。
第二幕：content-visibility: hidden;——“我隐身了，但空间还在”
这个值会让元素完全隐藏，就像设置了visibility: hidden;一样。它不会被渲染，但它仍然占据着页面上的空间。这意味着布局不会发生改变。
.my-element {
content-visibility: hidden; /* 隐藏元素，但保留空间 */
}这个值看起来好像也没啥特别的，但请记住它，后面会用到它来做一些有趣的事情。
第三幕：content-visibility: auto;——“离屏优化，性能起飞”
这才是content-visibility的真正力量所在！当元素设置了content-visibility: auto;时，如果它完全不在视口内，浏览器会跳过它的渲染，只渲染一个占位符。这包括：
- 跳过渲染： 不绘制元素的内容。
- 跳过布局： 不计算元素及其子元素的布局。
- 跳过绘制： 不绘制元素及其子元素。
当元素进入视口时，浏览器才会开始渲染它。
.my-element {
content-visibility: auto; /* 自动优化离屏内容 */
}这就像给你的页面装了一个“按需加载”的引擎，只有需要的时候才会启动，大大提高了页面的性能。
举个栗子：
假设你有一个包含大量图片的长列表。如果没有content-visibility，浏览器会把所有图片都加载并渲染出来，即使用户只看到了列表的开头部分。
<div class="container">
<div class="item">
<img src="image1.jpg" alt="Image 1">
<p>Description 1</p>
</div>
<div class="item">
<img src="image2.jpg" alt="Image 2">
<p>Description 2</p>
</div>
<!-- 更多 item -->
</div>
<style>
.container {
/* ... */
}
.item {
/* ... */
}
img {
/* ... */
}
</style>有了content-visibility: auto;，浏览器只会渲染视口内的item，其他的item则会被跳过，直到它们进入视口。
<div class="container">
<div class="item">
<img src="image1.jpg" alt="Image 1">
<p>Description 1</p>
</div>
<div class="item">
<img src="image2.jpg" alt="Image 2">
<p>Description 2</p>
</div>
<!-- 更多 item -->
</div>
<style>
.container {
/* ... */
}
.item {
content-visibility: auto; /* 关键的一步 */
/* ... */
}
img {
/* ... */
}
</style>第四幕：content-visibility: visible; (再次登场)——“手动切换，灵活控制”
有时候，你可能需要手动控制元素的渲染状态。比如，你可能想在用户点击某个按钮后，才开始渲染某个隐藏的区域。这时，你可以使用JavaScript来切换content-visibility的值。
<button id="show-more">Show More</button>
<div id="hidden-content" class="hidden">
<!-- 大量内容 -->
</div>
<style>
#hidden-content {
content-visibility: hidden; /* 初始状态：隐藏 */
}
.visible {
content-visibility: visible !important; /* 优先级要高 */
}
</style>
<script>
const showMoreButton = document.getElementById('show-more');
const hiddenContent = document.getElementById('hidden-content');
showMoreButton.addEventListener('click', () => {
hiddenContent.classList.add('visible'); // 或者使用 style.contentVisibility = 'visible';
});
</script>在这个例子中，#hidden-content初始状态是隐藏的。当用户点击“Show More”按钮时，我们使用JavaScript将其content-visibility设置为visible，从而触发渲染。
第五幕：contain-intrinsic-size——“占位符的秘密”
当元素设置了content-visibility: auto;并且不在视口内时，浏览器会跳过渲染，只渲染一个占位符。但是，这个占位符的大小是多少呢？默认情况下，浏览器可能会尝试根据内容来猜测占位符的大小，但这可能会导致页面布局跳动。
为了解决这个问题，我们可以使用contain-intrinsic-size属性来显式地指定占位符的大小。
.my-element {
content-visibility: auto;
contain-intrinsic-size: 1000px 500px; /* 宽度 1000px，高度 500px */
}contain-intrinsic-size接受两个值：宽度和高度。你可以使用像素、百分比或其他CSS单位来指定它们。
举个栗子：
假设你有一个包含大量图片的长列表，每张图片的大小都是固定的。你可以使用contain-intrinsic-size来确保占位符的大小与图片的大小一致，从而避免页面布局跳动。
<div class="container">
<div class="item">
<img src="image1.jpg" alt="Image 1">
<p>Description 1</p>
</div>
<div class="item">
<img src="image2.jpg" alt="Image 2">
<p>Description 2</p>
</div>
<!-- 更多 item -->
</div>
<style>
.container {
/* ... */
}
.item {
content-visibility: auto;
contain-intrinsic-size: 200px 150px; /* 假设图片大小是 200x150 */
/* ... */
}
img {
width: 200px;
height: 150px;
/* ... */
}
</style>第六幕：content-visibility: paint-contain;——“限制绘制，减少重绘”
这个值告诉浏览器，该元素的内容不会在其边界之外绘制。这意味着如果元素的一部分被裁剪或遮挡，浏览器可以跳过绘制被裁剪或遮挡的部分。
.my-element {
content-visibility: paint-contain; /* 限制绘制区域 */
}这个值主要用于优化具有复杂动画或视觉效果的元素，可以减少不必要的重绘操作。
content-visibility的适用场景
- 长列表： 这是
content-visibility最常见的应用场景，可以显著提高长列表的滚动性能。 - 大型单页应用（SPA）： 对于复杂的SPA，可以使用
content-visibility来延迟渲染不常用的组件，从而加快应用的启动速度。 - 包含大量图片或视频的页面：
content-visibility可以延迟加载这些资源，从而减少页面的初始加载时间。 - 需要手动控制渲染状态的元素： 例如，可以隐藏一些高级选项，直到用户点击“Show Advanced Options”按钮。
content-visibility的注意事项
- 兼容性：
content-visibility的兼容性还不是很好，在使用之前需要进行兼容性测试。 - 过度使用： 不要滥用
content-visibility。如果元素的内容很简单，并且很快就会被渲染出来，那么使用content-visibility反而可能会降低性能。 - 布局跳动： 使用
content-visibility时，可能会导致页面布局跳动。可以使用contain-intrinsic-size来解决这个问题。 - SEO： 搜索引擎爬虫可能无法正确解析
content-visibility，因此在使用时需要注意SEO问题。
总结：content-visibility属性值一览表
| 值 | 描述 |
|---|---|
visible |
默认值。元素的内容完全可见，浏览器会像往常一样渲染它。 |
hidden |
元素的内容不可见，但它仍然占据着页面上的空间。这类似于visibility: hidden;。 |
auto |
自动优化离屏内容。如果元素完全不在视口内，浏览器会跳过它的渲染，只渲染一个占位符。当元素进入视口时，浏览器才会开始渲染它。 |
paint-contain |
限制绘制区域。元素的内容不会在其边界之外绘制。这可以减少不必要的重绘操作。 |
contain-intrinsic-size属性
| 属性 | 描述 |
|---|---|
contain-intrinsic-size |
指定占位符的大小，防止布局跳动。接受两个值：宽度和高度。例如：contain-intrinsic-size: 100px 200px; 表示占位符宽度100px，高度200px。 |
与其他技术的配合
content-visibility可以与其他技术配合使用，以进一步提高页面性能。
- Intersection Observer API： 可以使用Intersection Observer API来检测元素是否进入视口，并根据元素的可见性来动态地设置
content-visibility的值。 - 懒加载图片： 可以使用
content-visibility来延迟加载图片，只有当图片进入视口时才开始加载。 - 虚拟滚动： 虚拟滚动是一种只渲染视口内的元素的优化技术。可以将
content-visibility与虚拟滚动结合使用，以获得更好的性能。
案例分析：电商网站商品列表
电商网站的商品列表通常包含大量的商品，如果一次性加载所有商品，可能会导致页面加载缓慢。可以使用content-visibility来延迟渲染离屏的商品，从而提高页面的加载速度和滚动性能。
<div class="product-list">
<div class="product-item">
<img src="product1.jpg" alt="Product 1">
<h2>Product 1</h2>
<p>Description 1</p>
</div>
<div class="product-item">
<img src="product2.jpg" alt="Product 2">
<h2>Product 2</h2>
<p>Description 2</p>
</div>
<!-- 更多商品 -->
</div>
<style>
.product-list {
/* ... */
}
.product-item {
content-visibility: auto; /* 延迟渲染离屏商品 */
contain-intrinsic-size: 300px 400px; /* 占位符大小 */
/* ... */
}
img {
/* ... */
}
</style>在这个例子中，我们将content-visibility: auto;应用到product-item上，并使用contain-intrinsic-size来指定占位符的大小。这样，浏览器只会渲染视口内的商品，其他的商品则会被跳过，直到它们进入视口。
总结
content-visibility是一个强大的CSS属性，可以用来优化页面的渲染性能，特别是在处理长列表、大型单页应用和包含大量图片或视频的页面时。通过合理地使用content-visibility，可以显著提高页面的加载速度和滚动性能，从而改善用户体验。
记住，没有银弹。content-visibility也不是万能的，需要根据具体的场景进行选择和调整。在使用之前，一定要进行充分的测试，确保它能够真正地提高页面的性能，而不是适得其反。
好了，今天的讲座就到这里。希望大家能够掌握content-visibility的用法，并将其应用到自己的项目中。如果大家有什么问题，欢迎在评论区留言，我会尽力解答。
祝大家编程愉快，BUG退散！