一个可能让页面渲染速度提升数倍的CSS属性

谁借莪１个温暖的怀抱￠ 2022-12-04 01:25 136阅读 0赞

![format_png][]

浏览器在接收到服务端返回的 `HTML` 之后，需要把这段数据渲染成用户看到的页面，在开始渲染第一个元素之前可能还需要经过很多步骤。这个过程会适用于整个页面，包括当前不可见的内容。

所以在首屏渲染时，是有很大一部分时间花费在用户不可见的内容上，实际上这部分数据我们没必要在首屏就把它们渲染出来。

`Chrome 85` 新推出的 `content-visibility: auto` 就是为了解决上面的问题，它可以告诉浏览器暂时跳过该元素的布局和渲染工作，直到这个元素滚动到当前视口，从而可以加快整个页面的初始渲染，并且缩短用户和页面可交互需要花费的时间。

## CSS Containment ##

`content-visibility` 依赖于 `CSS Containement`，目前只能在 `Chromium 85` 中支持 `content-visibility` 属性，但是大多数浏览器都支持 `CSS Containement`。

`CSS Containment` 是一种规范，它的主要目的就是在页面渲染的过程中通过忽略文档中的某些子树来提高页面的渲染性能。

上面我们提到，在首屏渲染时，是有很大一部分时间花费在用户不可见的内容上，实际上这部分数据我们没必要在首屏就把它们渲染出来。作为开发者，肯定很清楚当前修改的元素是否独立或者影响其他元素。因此如果开发者能把这个信息通过 `CSS` 告诉浏览器，那么浏览器就不需要再去考虑其他元素了。`CSS Containment` 模块中提供的 `contain` 属性就为我们提供了这种能力。

`css contain` 一共有四个属性：

*  `size`: 在计算该元素盒子大小的时候会忽略其子元素
 *  `layout`: 元素的内部布局不受外部影响，同时该元素以及其内容也不会影响到上级
 *  `style`: 声明同时会影响这个元素和其子孙元素的属性，都在这个元素的包含范围内
 *  `paint`: 声明这个元素的子孙节点不会在它边缘外显示。如果一个元素在视窗外或因其他原因导致不可见，则同样保证它的子孙节点不会被显示。

## content-visibility ##

`css contain`  是一个很棒的属性，但是我们不太容易判断要选取它的哪个值。现在，我们可以直接应用 `content-visibility` 来达到这样的效果，但是配置却简单的多。

`content-visibility` 属性也有多个值，但是 `auto` 这个值是一个可以立刻提高性能的属性：

.my-class {
      content-visibility: auto;
    }

如果一个元素具有 `auto` 这个属性，如果当前元素没有出现在屏幕上，浏览器就不会渲染它和它的子元素；当元素接近用户的可视区域时，浏览器就会解除限制，并开始进行渲染；这可以保证元素会及时被用户看到。

![format_png 1][]

看看上面的例子，在将 `content-visibility: auto` 设置到一些小的模块之后，渲染时间直接从232ms提升到了30ms，性能提升了7倍。

## contain-intrinsic-size ##

如果我们给可视区域外的元素增加了  `content-visibility: auto`  属性，那么当滚动条滚动到这个元素之后，如果这个元素很大有一定高度，那么滚动条的长度就会发生变化，页面可能就会发生抖动的现象。

解决这个问题，可以先使用 `contains-intrinsic-size` 提前给元素设置自然高度的大小，比如 `1000px` ，这样元素提前占用了一些高度，就不会发生抖动现象。

## ❤️看完三件事 ##

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点赞，让更多的人也能看到介绍内容（收藏不点赞，都是耍流氓-\_-）
2.  关注公众号“前端劝退师”，不定期分享原创知识。
3.  也看看其他文章

![format_png 2][]

劝退师个人微信：**huab119**

也可以来我的`GitHub`博客里拿所有文章的源文件：

**前端劝退指南**：https：//github.com/roger-hiro/BlogFN一起玩耍呀

在看、点赞、转发支持作者❤️

[format_png]: /images/20221123/0de3aafea4de4805875e2df4fd232748.png
[format_png 1]: /images/20221123/5c28c3fb098c46d284708b7b2dcd16e9.png
[format_png 2]: /images/20221123/f816e11f55a14d4697bf7ef6f7a44489.png