发布于 由admin

CSS `Content Visibility` `auto` 模式的 `Containment` 行为深度分析

各位同学，早上好！或者下午好！取决于你现在是几点在看这篇文章。今天咱们来聊聊CSS content-visibility: auto 这个小可爱，以及它背后的 containment 机制。这玩意儿用好了，能让你的网页性能嗖嗖地往上窜，但用不好，也可能掉进坑里。所以，咱们得把它扒个精光，看看到底是怎么回事。

Content Visibility: Auto，自动挡的性能优化神器？

首先，content-visibility: auto 简单来说，就是让浏览器智能地决定是否渲染某个元素的内容。听起来是不是有点像自动驾驶？浏览器会根据元素是否在视口内（viewport）来判断。如果在视口内，就正常渲染；如果不在，就跳过渲染，只保留元素的尺寸和布局信息。

这玩意儿最大的好处就是，可以显著减少初始渲染时间。想象一下，一个很长的页面，用户一开始只需要看到屏幕上的内容。如果把屏幕外的部分都先跳过渲染，那速度肯定快多了。

Containment：内容隔离，各玩各的

现在，咱们来聊聊 containment。这才是 content-visibility: auto 的灵魂所在。containment 的作用是告诉浏览器，某个元素的内容与其他元素是相互独立的，不会互相影响。这样，浏览器才能放心地跳过渲染，而不用担心会影响到其他元素的布局。

containment 有几个常用的值：

  • none: 这是默认值，表示没有应用任何 containment。
  • strict: 这相当于同时应用了 contain: size layout style paint。是最严格的隔离模式，也是 content-visibility: auto 建议使用的模式。
  • content: 这相当于同时应用了 contain: layout style paint。
  • size: 表示元素的尺寸不依赖于其内容。
  • layout: 表示元素内部的布局不影响外部元素，反之亦然。
  • style: 表示元素的样式变化不影响外部元素。
  • paint: 表示元素的绘制不影响外部元素。

可以用表格总结一下：

Containment 值 包含的属性 描述
none 无 默认值，没有应用任何 containment。
strict size layout style paint 最严格的隔离模式。元素的尺寸不依赖于其内容，内部布局不影响外部，样式变化不影响外部，绘制不影响外部。
content layout style paint 元素的内部布局不影响外部，样式变化不影响外部，绘制不影响外部。
size 元素的尺寸不依赖于其内容。这意味着即使元素的内容发生变化，元素的尺寸也会保持不变（除非有其他样式覆盖了它）。这对于优化布局性能很有用，因为浏览器不需要重新计算元素的尺寸。
layout 元素的内部布局不影响外部元素，反之亦然。这意味着浏览器可以独立地计算元素的布局，而不需要考虑外部元素。这对于优化布局性能很有用，尤其是在复杂的布局中。
style 元素的样式变化不影响外部元素。这意味着浏览器可以独立地应用元素的样式，而不需要重新计算外部元素的样式。这对于优化渲染性能很有用，尤其是在元素有复杂的样式变化时。
paint 元素的绘制不影响外部元素。这意味着浏览器可以独立地绘制元素，而不需要考虑外部元素。这对于优化绘制性能很有用，尤其是在元素有复杂的绘制操作时（例如，阴影、滤镜等）。如果一个元素应用了 paint: contain，那么浏览器可以避免不必要的重绘，从而提高性能。例如，如果一个元素的内容发生了变化，但它的边界没有发生变化，那么浏览器只需要重绘该元素的内容，而不需要重绘整个页面。

Content Visibility: Auto 和 Containment 联姻

content-visibility: auto 必须和 containment 配合使用才能发挥最大的威力。一般来说，建议使用 contain: strict。因为 strict 包含了所有必要的隔离属性，可以确保浏览器能够安全地跳过渲染。

代码示例

咱们来看几个例子，让大家更直观地了解 content-visibility: auto 和 containment 的用法。

<!DOCTYPE html>
<html>
<head>
<title>Content Visibility Example</title>
<style>
.container {
    width: 80%;
    margin: 20px auto;
    border: 1px solid #ccc;
    padding: 10px;
}

.item {
    height: 200px;
    margin-bottom: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    padding: 10px;
}

.item.auto {
    content-visibility: auto;
    contain: strict; /* 建议使用 strict */
}

.item.hidden {
    content-visibility: hidden;
    contain: size layout;
}

</style>
</head>
<body>

<div class="container">
    <div class="item">
        <h3>Normal Item</h3>
        <p>This is a normal item that will always be rendered.</p>
    </div>
    <div class="item auto">
        <h3>Content Visibility: Auto Item</h3>
        <p>This item will only be rendered when it is in the viewport.</p>
        <p>This item will only be rendered when it is in the viewport.</p>
        <p>This item will only be rendered when it is in the viewport.</p>
    </div>
    <div class="item hidden">
        <h3>Content Visibility: Hidden Item</h3>
        <p>This item will not be rendered, but its space will be reserved.</p>
    </div>
    <!-- 更多 Item -->
    <div class="item auto">
        <h3>Content Visibility: Auto Item</h3>
        <p>This item will only be rendered when it is in the viewport.</p>
        <p>This item will only be rendered when it is in the viewport.</p>
        <p>This item will only be rendered when it is in the viewport.</p>
    </div>
    <div class="item">
        <h3>Normal Item</h3>
        <p>This is a normal item that will always be rendered.</p>
    </div>
    <div class="item auto">
        <h3>Content Visibility: Auto Item</h3>
        <p>This item will only be rendered when it is in the viewport.</p>
        <p>This item will only be rendered when it is in the viewport.</p>
        <p>This item will only be rendered when it is in the viewport.</p>
    </div>

    <div class="item hidden">
        <h3>Content Visibility: Hidden Item</h3>
        <p>This item will not be rendered, but its space will be reserved.</p>
    </div>

</div>

</body>
</html>

在这个例子中，.item.auto 应用了 content-visibility: auto 和 contain: strict。这意味着这些元素只有在视口内才会被渲染。

.item.hidden 应用了 content-visibility: hidden 和 contain: size layout。这意味着这些元素不会被渲染，但它们所占用的空间仍然会被保留。注意这里我们没有使用contain: strict,而是使用了contain: size layout,这是为了演示content-visibility: hidden可以和其它containment属性一起使用。

Content Visibility: Hidden，隐藏的秘密武器

除了 auto 之外，content-visibility 还有另一个值：hidden。content-visibility: hidden 的作用和 display: none 有点像，都是隐藏元素。但它们之间有一个关键的区别：

  • display: none 会完全移除元素，包括它的尺寸和布局信息。
  • content-visibility: hidden 只会隐藏元素，但会保留它的尺寸和布局信息。

这意味着，content-visibility: hidden 可以用于在不改变页面布局的情况下隐藏元素。这在某些场景下非常有用，例如，在动画中隐藏元素，或者在响应式设计中根据屏幕尺寸隐藏元素。

Content Visibility 的使用场景

  • 长列表/长页面: 对于包含大量内容的列表或页面，可以使用 content-visibility: auto 来提高初始渲染速度。
  • 虚拟滚动: content-visibility: auto 可以与虚拟滚动技术结合使用，只渲染视口内的元素，从而实现高性能的滚动体验。
  • 复杂组件: 对于复杂的组件，可以使用 content-visibility: auto 将其隔离，避免影响到其他元素的渲染。

Content Visibility 的注意事项

  • Containment 是关键: 一定要配合 containment 使用，否则 content-visibility: auto 可能无法正常工作。
  • 避免过度使用: 不要滥用 content-visibility: auto。如果元素的内容很简单，渲染速度很快，就没有必要使用它。
  • 测试: 在使用 content-visibility: auto 之后，一定要进行测试，确保页面在各种设备和浏览器上都能正常工作。
  • content-visibility 不会阻止资源加载: 即使元素被跳过渲染，它的资源（例如图片）仍然会被加载。如果需要延迟加载资源，可以使用 loading="lazy" 属性。
  • 动态内容: 如果元素的内容是动态变化的，那么在使用 content-visibility: auto 时需要格外小心。如果元素的内容在视口外发生了变化，那么当它进入视口时，可能需要重新渲染。

Content Visibility 和 JavaScript 的配合

content-visibility 主要是 CSS 的特性，但它也可以和 JavaScript 配合使用，实现更高级的功能。例如，可以使用 JavaScript 监听滚动事件，并根据元素的可见性来动态地切换 content-visibility 的值。

const items = document.querySelectorAll('.item.auto');

function handleScroll() {
    items.forEach(item => {
        const rect = item.getBoundingClientRect();
        const isInViewport = (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );

        if (isInViewport) {
            item.style.contentVisibility = 'visible'; // 强制渲染
        } else {
            item.style.contentVisibility = 'auto'; // 恢复自动模式
        }
    });
}

window.addEventListener('scroll', handleScroll);
window.addEventListener('resize', handleScroll); // 监听窗口大小变化
handleScroll(); // 初始化

这段代码监听了滚动事件和窗口大小变化事件，并根据元素的可见性来动态地切换 content-visibility 的值。当元素进入视口时，contentVisibility 被设置为 visible，强制浏览器渲染它。当元素离开视口时，contentVisibility 被设置为 auto，恢复自动模式。

Content Visibility 的兼容性

content-visibility 的兼容性还算不错，主流浏览器都已经支持。但是，为了兼容老版本的浏览器，可以考虑使用 Polyfill。

总结

content-visibility: auto 是一种强大的性能优化技术，可以显著提高网页的初始渲染速度。但是，它需要和 containment 配合使用，并且需要注意一些细节问题。希望通过今天的讲解，大家能够更好地理解和使用 content-visibility: auto，让自己的网页飞起来！

一些额外的思考

  • content-visibility 是否会影响 SEO？
    一般来说，content-visibility 不会影响 SEO。因为搜索引擎爬虫会等待页面完全加载完毕，才会抓取内容。但是，如果过度使用 content-visibility，导致页面加载速度过慢，可能会影响用户体验，从而间接影响 SEO。
  • content-visibility 是否会影响 JavaScript 的执行？
    content-visibility 不会影响 JavaScript 的执行。即使元素被跳过渲染，JavaScript 仍然可以访问和操作它。
  • 如何调试使用了content-visibility的页面？
    可以使用浏览器的开发者工具来调试使用了 content-visibility 的页面。在 Chrome 开发者工具中，有一个 "Rendering" 选项卡，可以用来查看页面的渲染情况，包括哪些元素被跳过渲染，哪些元素被强制渲染。

好了，今天的讲座就到这里。希望大家有所收获！如果有什么问题，欢迎随时提问。下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注