应用-性能优化
content-visibility
属性:
- visible: 默认值, 没有效果. 元素被正常展示
- hidden: 元素跳过它的内容. 跳过的内容不能被用户代理功能访问(页面查找, 标签顺序导航, 选择, 聚焦等), 类似
display:none - auto: 打开布局包含,样式包含和绘制包含. 如果元素与用户不想管,回跳过内容. 跳过的内容必须正常用于用户代理功能.
hidden 与 display:none 的区别
- content-visibility: hidden
- 只是隐藏了子元素, 自身不会被隐藏
- 隐藏内容的渲染状态会被缓存, 当被设为可见时, 浏览器会应用缓存而不是重新渲染, 所以对于需要频繁切换显示隐藏的元素, 能提高渲染性能.
content-visibility: auto
这个属性可以用来跳过屏幕外的内容渲染, 对于长列表的场景, 可以大大减少页面渲染的时间.