总结一下
简单总结一下:
- 在一些需要被频繁切换显示、隐藏状态的元素上,使用
content-visibility: hidden,用户代理无需重头开始渲染它和它的子元素,比diaplay: none能有效的提升切换时的渲染性能; content-visibility: auto的作用是如果该元素不在屏幕上,并且与用户无关,则不会渲染其后代元素。更加类似于虚拟列表,使用它能极大的提升长列表、长文本页面的渲染性能;- 合理使用
contain-intrinsic-size预估设置了content-visibility: auto元素的高宽,可以有效的避免滚动条在滚动过程中的抖动; content-visibility: auto无法直接替代 LazyLoad,设置了content-visibility: auto的元素在可视区外只是未被渲染,但是其中的静态资源仍旧会在页面初始化的时候被全部加载;- 即便存在设置了
content-visibility: auto的未被渲染的元素,但是它并不会影响全局的搜索功能。