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
来加载长列表,减少渲染时间,提高页面渲染性能。