首屏/长列表性能优化：content-visibility优化渲染性能细讲

content-visibility

详情看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/content-visibility

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

• visible：默认值，没有效果。元素的内容被正常布局和呈现。

• hidden：元素跳过它的内容。跳过的内容不能被用户代理功能访问，例如在页面中查找、标签顺序导航等，也不能被选择或聚焦。这类似于给内容设置display: none。

• auto：该元素打开布局包含、样式包含和绘制包含。如果该元素与用户不相关，它也会跳过其内容。与 hidden 不同，跳过的内容必须仍可正常用于用户代理功能，例如在页面中查找、tab 顺序导航等，并且必须正常可聚焦和可选择。

content-visibility: hidden的效果与display: none类似，但其实两者还是有比较大的区别的：

• content-visibility: hidden 只是隐藏了子元素，自身不会被隐藏

• content-visibility: hidden 隐藏内容的渲染状态会被缓存，所以当它被移除或者设为可见时，浏览器不会重新渲染，而是会应用缓存，所以对于需要频繁切换显示隐藏的元素，这个属性能够极大地提高渲染性能。

content-visibility: auto 做性能优化

页面上虽然会有很多元素，但是它们会同时呈现在用户眼前吗，很显然是不会的，用户每次能够真实看到就只有设备可见区那些内容，对于非可见区的内容只要页面不发生滚动，用户就永远看不到。虽然用户看不到，但浏览器却会实实在在的去渲染，以至于浪费大量的性能。所以我们得想办法让浏览器不渲染非可视区的内容就能够达到提高页面渲染性能的效果。

很多同学拿这个来做滚动优化，比如《两行CSS让页面提升了近7倍渲染性能！》，但是如果数据非常大的话（白屏问题），还是推荐用虚拟滚动。

content-visibility不只是这一种用处。

content-visibility会将分配给它的元素的高度（height）视为0（子元素不渲染，无法撑开容器），浏览器在渲染之前会将这个元素的高度变为0，从而使我们的页面高度和滚动变得混乱。

如何改善滚动条

直接设置高度和宽度：

如果你知道元素应该具有的确切尺寸，你可以直接设置它们的高度和宽度。这样可以确保元素始终占据指定的空间，无论其内容是否可见。

contain-intrinsic-size 预设高度

页面在滚动过程中滚动条一直抖动，这是一个不能接受的体验问题，为了更好地实现content-visibility，浏览器需要应用 size containment 以确保内容的渲染结果不会以任何方式影响元素的大小。这意味着该元素将像空的一样布局。如果元素没有在常规块布局中指定的高度，那么它将是 0 高度。

这个时候我们可以使用contain-intrinsic-size来指定的元素自然大小，确保我们未渲染子元素的 div 仍然占据空间，同时也保留延迟渲染的好处。

只需要给添加了content-visibility: auto的元素添加上contain-intrinsic-size就能够解决滚动条抖动的问题

content-visibility: auto 是否可以替代 LazyLoad（懒加载）呢

LazyLoad 的作用在于，当页面未滚动到相应区域，该区域内的资源（网络请求）不会被加载。反之，当页面滚动到相应区域，相关资源的请求才会被发起。

content-visibility: auto 无法直接替代 LazyLoad，设置了 content-visibility: auto 的元素在可视区外只是未被渲染，但是其中的静态资源仍旧会在页面初始化的时候被全部加载。

所以，即便设置content-visibility: auto;，跳过渲染的元素内如果有图片，图片依然会加载，所以需要为图片设置属性loading="lazy"，该属性是图片懒加载的原生实现

contentvisibilityautostatechange

详情：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/contentvisibilityautostatechange_event

参考文章：

使用 content-visibility 优化渲染性能 https://www.cnblogs.com/coco1s/p/16373817.html

转载本站文章《首屏/长列表性能优化：content-visibility优化渲染性能细讲》,
请注明出处：https://www.zhoulujun.cn/html/webfront/style/css3/2024_0718_9173.html