浏览器在接收到服务端返回的HTML之后，需要把这段数据渲染成用户看到的页面，在开始渲染第一个元素之前可能还需要经过很多步骤。这个过程会适用于整个页面，包括当前不可见的内容。
所以在首屏渲染时，是有很大一部分时间花费在用户不可见的内容上，实际上这部分数据我们没必要在首屏就把它们渲染出来。
Chrome85新推出的content-visibility:auto就是为了解决上面的问题，它可以告诉浏览器暂时跳过该元素的布局和渲染工作，直到这个元素滚动到当前视口，从而可以加快整个页面的初始渲染，并且缩短用户和页面可交互需要花费的时间。
CSSContainmentcontent-visibility依赖于CSSContainement，目前只能在Chromium85中支持content-visibility属性，但是大多数浏览器都支持CSSContainement。
CSSContainment是一种规范，它的主要目的就是在页面渲染的过程中通过忽略文档中的某些子树来提高页面的渲染性能。
上面我们提到，在首屏渲染时，是有很大一部分时间花费在用户不可见的内容上，实际上这部分数据我们没必要在首屏就把它们渲染出来。作为开发者，肯定很清楚当前修改的元素是否独立或者影响其他元素。因此如果开发者能把这个信息通过CSS告诉浏览器，那么浏览器就不需要再去考虑其他元素了。CSSContainment模块中提供的contain属性就为我们提供了这种能力。
csscontain一共有四个属性：
size:在计算该元素盒子大小的时候会忽略其子元素layout:元素的内部布局不受外部影响，同时该元素以及其内容也不会影响到上级style:声明同时会影响这个元素和其子孙元素的属性，都在这个元素的包含范围内paint:声明这个元素的子孙节点不会在它边缘外显示。如果一个元素在视窗外或因其他原因导致不可见，则同样保证它的子孙节点不会被显示。content-visibilitycsscontain是一个很棒的属性，但是我们不太容易判断要选取它的哪个值。现在，我们可以直接应用content-visibility来达到这样的效果，但是配置却简单的多。
content-visibility属性也有多个值，但是auto这个值是一个可以立刻提高性能的属性：
.my-class{content-visibility:auto;}
如果一个元素具有auto这个属性，如果当前元素没有出现在屏幕上，浏览器就不会渲染它和它的子元素；当元素接近用户的可视区域时，浏览器就会解除限制，并开始进行渲染；这可以保证元素会及时被用户看到。
看看上面的例子，在将content-visibility:auto设置到一些小的模块之后，渲染时间直接从ms提升到了30ms，性能提升了7倍。
contain-intrinsic-size如果我们给可视区域外的元素增加了content-visibility:auto属性，那么当滚动条滚动到这个元素之后，如果这个元素很大有一定高度，那么滚动条的长度就会发生变化，页面可能就会发生抖动的现象。
解决这个问题，可以先使用contains-intrinsic-size提前给元素设置自然高度的大小，比如px，这样元素提前占用了一些高度，就不会发生抖动现象。
在看、点赞、转发支持作者??
预览时标签不可点收录于话题#个上一篇下一篇