前端如何提高页面渲染性能~

用content-visibility:auto呀

（之前遇到过一个类似的优化，那时候本鱼初入职场还不知道有这个属性，仅剩的几根头发差点没保住/(ㄒoㄒ)/~~）

三个可选值:

• visible: 默认值。对布局和呈现不会产生什么影响。
• hidden: 元素跳过其内容的呈现。类似于display: none，区别在于content-visibility: hidden 只是隐藏了子元素，自身不会被隐藏，且隐藏内容的渲染状态会被缓存，所以对于需要频繁切换显示隐藏的元素，这个属性能够极大地提高渲染性能。
• auto: 只渲染用户可见区域的元素。

配套属性contain-intrinsic-size

• 控制由 content-visibility 指定的元素的自然大小。
• 解决滚动条抖动问题：利用 content-visibility: auto 处理长文本、长列表的时候，在滚动页面的过程中，滚动条一直在抖动，对于用户及开发者都是不能接受的，所以就有了这个配套属性。
• 如果能准确知道 content-visibility: auto 的元素在渲染状态下的高度，就填写对应的高度。如果如法准确知道高度，也可以填写一个大概的值。

content-visibility: auto与懒加载

content-visibility: auto可以代替懒加载么？答案是否定的。懒加载的作用在于，当页面未滚动到相应区域，该区域内的资源（网络请求）不会被加载。但是content-visibility: auto的元素在可视区外只是未被渲染，其中的静态资源仍旧会在页面初始化的时候被全部加载。

更详细完整的介绍和用法可以参考：两行CSS让页面提升了近7倍渲染性能！ - 掘金