content-visibility：auto，提升页面渲染性能content-visibility 属性，可以跳过元素

content-visibility 属性，可以跳过元素的渲染工作，直到需要时再进行渲染。如果大部分内容不在屏幕上，使用 content-visibility 属性可让初始用户加载速度加快很多。还可以更快地与屏幕上的内容交互。

从 2024 年 9 月开始，基准新资源已推出！表示桌面版和移动版所有核心浏览器都支持的 Web 功能。如果所用功能属于基准组成部分，您可以信任浏览器兼容性级别。

兼容性

content-visibility取值

visible：默认值，没有效果。元素的内容被正常布局和呈现。
hidden：元素跳过它的内容。跳过的内容不能被用户代理功能访问，例如在页面中查找、标签顺序导航等，也不能被选择或聚焦。这类似于给内容设置display: none。
auto：该元素打开布局包含、样式包含和绘制包含。如果该元素与用户不相关，它也会跳过其内容。与 hidden 不同，跳过的内容必须仍可正常用于用户代理功能，例如在页面中查找、tab 顺序导航等，并且必须正常可聚焦和可选择。

content-visibility: auto实现虚拟列表，提升渲染性能

演示可见渲染性能rendering提升一倍，只是渲染性能，不影响加载速度，因此不可替代loading='lazy'

关键代码

display: block; // 必须为块级元素
content-visibility: auto;
contain-intrinsic-size: auto 100px;

搭配contain-intrinsic-size 充当占位符取代渲染内容

contain-intrinsic-size: auto 300px;

contain-intrinsic-size 的 auto 关键字会可使浏览器记住上次渲染的尺寸（如果有），并使用该尺寸，而不是开发者提供的占位符尺寸。例如，如果您指定了 contain-intrinsic-size: auto 300px，则该元素在每个维度上都会以 300px 的固有尺寸开始，但在元素的内容呈现后，它将保留呈现的固有尺寸。系统也会记住所有后续渲染尺寸更改。实际上，这意味着，如果您滚动应用了 content-visibility: auto 的元素，然后将其滚动回屏幕外，该元素将自动保留其理想宽度和高度，而不会恢复占位符大小。此功能对于无限滚动条尤为有用，无限滚动条现在可以在用户浏览网页时自动改进大小估计值。

使用注意事项

容器需要是块级容器
使用 contain-intrinsic-size 指定元素的自然尺寸，否则不生效
不可替代loading='lazy'
不影响全局搜索，搜索引擎通常仍然能够读取这些内容

DEMO

直接预览：codepen.io/maovkumr-th…

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <div v-for="(e, i) in data" :key="i" class="list">
            <img :src="e.img" alt="img" style="width: 100px; height: 100px" />
            <span>{{ e.name }}</span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'content-visibility',
      data: []
    }
  },
  mounted () {
    for (let index = 0; index < 1000; index++) {
      this.data.push({
        id: index,
        name: 'John',
        img: 'https://docer-files.wpscdn.cn/storage/official/file/2024/05/07/0a13c37ca0feddf4d3331571ef204a48.png'
      })
    }
  }
}
</script>

<style scoped>
h1,
h2 {
    font-weight: normal;
}
.hello,.list {
  display: block; // 必须为块级元素
  content-visibility: auto;
  contain-intrinsic-size: auto 100px; // 使用 contain-intrinsic-size 指定元素的自然尺寸
}
</style>

content-visibility：auto，提升页面渲染性能

兼容性