最近在业务中使用了content-visibility来优化渲染性能。这是一个相对较新且功能强大的属性。本文将带领您深入了解它。什么是内容可见性？content-visibility:属性控制元素是否呈现其内容，这允许用户代理（浏览器）在需要时可能省略大量布局和呈现工作。MDN原文：content-visibilityCSS属性控制元素是否完全呈现其内容，并强制包含一组强大的内容，从而允许用户代理潜在地省略大量的布局和呈现工作，直到它变得非常需要为止。Basic使用户代理能够跳过元素的渲染工作（包括布局和绘画）直到需要它——这使得初始页面加载速度更快。它有几个共同的价值观。/*关键字值*/content-visibility:visible;内容可见性：隐藏；内容可见性：自动；单独说明：content-visibility:visible:默认值，无作用，相当于不加content-visibility，Elements照常渲染。内容可见性：隐藏：类似于显示：无，用户代理将跳过其内容的呈现。（这里要注意内容的渲染是跳过的）content-visibility:auto：如果元素不在屏幕上，与用户无关，则不会渲染其后代元素。contain-intrinsic-size当然，除了content-visibility，还有一个支撑属性--contain-intrinsic-size。contain-intrinsic-size：控制由内容可见性指定的元素的固有大小。上面两个属性光看定义和介绍会有点混乱。我们先来看看content-visibility具体是怎么用的。content-visibility:visible是默认值，加上之后没有任何作用，我们直接跳过。使用content-visibility:hidden来优化显示切换。首先，让我们看一下content-visibility:hidden。它通常与display:none进行比较，但它们之间还是有很大的区别。首先，假设我们有两个DIV环绕框：
