两行CSS让页面提升渲染性能

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

content-visibility: hidden的效果与display: none类似其区别在于:

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

contain-intrinsic-size 可以为元素指定以下一个或两个值。如果指定了两个值,则第一个值适用于宽度,第二个值适用于高度。如果指定单个值,则它适用于宽度和高度。

  • contain-intrinsic-width
  • contain-intrinsic-height






你可能感兴趣的:(css,前端)