性能优化 content-visibility

304 阅读1分钟

总结一下

简单总结一下:

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