CSS 新属性

CSS 新属性

content-visibility 主要用来提高页面渲染性能，它可以控制一个元素是否渲染其内容，并且允许浏览器跳过这些元素的布局与渲染

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

content-visibility: hidden手动管理可见性

效果与 display: none 类似，但它只是隐藏了子元素，自身不会被隐藏

content-visibility: auto 跳过渲染工作

它可以用来跳过屏幕外的内容渲染，对于这种有大量离屏内容的长列表，可以大大减少页面渲染时间

常用来优化长列表的渲染，减少渲染时间

需要和 contain-intrinsic-size搭配使用，通过它来指定未渲染元素的大小来确保未渲染子元素的div仍然占据空间，同时也保留延迟渲染的好处。

**contain-intrinsic-size **

• contain-intrinsic-width
• contain-intrinsic-height

总结：

可通过：

content-visibility: auto
contain-intrinsic-size: 200px

来加载长列表，减少渲染时间，提高页面渲染性能。