在 Chrome 浏览器版本 85 中，新增了 content-visibility 属性，可以跳过非可视区域内的内容布局和渲染，直到用户需要它为止。目的是为了提升页面的加载性能，使得初始用户的页面加载速度更快
属性值
-
visible
默认值，对布局和渲染不会产生任何的影响
-
hidden
不显示其内容，相当于对内容设置了
display: none属性 -
auto
用户可视区域内的元素，浏览器进行正常渲染；非用户可视区域内的元素，浏览器会暂时跳过其内容的布局和渲染，等到其处于用户可视区域时，浏览器再对其进行渲染
属性兼容性
通过 https://caniuse.com/ 工具在线查看
属性应用场景
通过设置 content-visibility: anto 来提高长列表页面的初次渲染性能
注意事项
-
问题
元素的部分内容包含需要用内容撑起高度的元素，如图片、视频等
在这种情况下使用
content-visibility: auto属性，可视区域外的img初始未进行渲染，高度为 0，随着滚动条向下滚动，页面高度增加，会导致滚动条的滚动有问题 -
解决
通过
contain-intrinsic-size属性来设置一个初始高度，如果高度不固定也可以设置一个大概的预估高度值一起学习，加群交流看 沸点
