css 属性： content-visibility

什么是content-visibility

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

• visible：默认值，没有任何效果，相当于没有添加content-visibility，渲染效果与往常一致
• hidden：与display: none的效果类似，浏览器将跳过内容渲染（跳过的是子元素的渲染，不包含自身）
• auto：如果该元素不在屏幕上，并且与用户无关，则不会渲染其子元素

content-visibility: hidden与 display: none的区别

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

添加了 content-visibility: hidden 之后，消失的只是添加了该元素的 div 的子元素消失不见，而父元素本身及其样式，还是存在页面上的。

假如两个div，一个加了display: none，另一个加了content-visibility: hidden，区别如图

.box1{
        width: 200px;
        height: 200px;
        background: #000;
        font-size: 20px;
        color: #ffff;
        margin-bottom: 200px;
        display: none;
    }
    .box2{
        width: 200px;
        height: 200px;
        background: #000;
        font-size: 20px;
        color: #ffff;
        content-visibility: hidden;
    }

那么，content-visibility: hidden 的作用是什么呢？

设置了 content-visibility: hidden 的元素，其元素的子元素将被隐藏，但是，它的渲染状态将会被缓存。所以，当 content-visibility: hidden 被移除时，用户代理无需重头开始渲染它和它的子元素。

因此，如果我们将这个属性应用在一些一开始需要被隐藏，但是其后在页面的某一时刻需要被渲染，或者是一些需要被频繁切换显示、隐藏状态的元素上，其渲染效率将会有一个非常大的提升。

content-visibility: auto 虚拟列表

content-visibility: auto 的作用是，如果该元素不在屏幕上，并且与用户无关，则不会渲染其后代元素。

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

先看一下不加content-visibility: auto 和加content-visibility: auto 的对比如图：

 左图为有content-visibility: auto属性，右图为没有content-visibility: auto属性，可以看出左图滚动条的长度明显比右图滚动条长度长，说明右图的内容远远多于左图的内容。

 

 从上图可以看到页面在滚动过程中滚动条一直抖动，这是一个不能接受的体验问题，这个时候我们可以使用contain-intrinsic-size来确保元素的正确渲染，同时也保留延迟渲染的好处。

contain-intrinsic-size是与content-visibility配套使用的属性，它可以用来控制由content-visibility指定的元素自然大小

contain-intrinsic-size

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

我们只需要给添加了content-visibility: auto的元素添加上contain-intrinsic-size就能够解决滚动条抖动的问题，当然，这个高度约接近真实渲染的高度，效果会越好，如果实在无法知道准确的高度，我们也可以给一个大概的值，也会使滚动条的问题相对减少。（经过测试这个值不能设置太小，滑动过快会出现白屏的情况，建议设置大一点， 实际高度是150px，我设置的是600px。）

 .paragraph{
        content-visibility: auto;
        contain-intrinsic-size: 600px;
    }

content-visibility 的一些其他问题

首先，看看 content-visibility 的兼容性：

目前还是比较惨淡的，当然，由于该属性属于渐进增强一类的功能，即便失效，也完全不影响页面本身的展示。

利用 content-visibility: auto 只能解决部分场景，在海量 DOM 的场景下的实际效果，数据越多，反而比全部加载要慢