content-visibility这么好用，为什么不给所有元素都应用上？

在逛 stackoverflow 时，看到一个提问，说既然 content-visibility 这么好用，为什么不给所有元素都用上呢？与其用：

.dom {
  content-visibility: auto;
}

不如直接：

.* {
  content-visibility: auto;
}

其实原因挺简单的，但也可以梳理一下。

省流版：这样会丢失掉 content-visibility 带来的性能优化。

为什么

正如我们常说，“天下没有免费的午餐”，所以总是存在权衡利弊。content-visibility 通过不渲染屏幕上不可见的 DOM 部分（参考）来提高性能，所以它首先会验证这部分是否需要渲染，然后执行渲染过程。

所以，这个操作是增加了一些验证的过程，同时去掉了渲染的过程。因此，只有去掉部分的收益大于增加部分的损耗，才会获得性能提升。

如果使用这样的代码：

* {
  content-visibility: auto;
}

基本上是在告诉浏览器在渲染之前验证所有内容，也就是节点及其子节点会递归地进行验证。

举一个极其简化但又有点夸张的例子：

假设屏幕上面有三个 .card，最初有一个半是可见的，每个 .card 元素有 10 个子元素。

假设每个 .card 的渲染时间为 1 秒，每个节点的验证时间为 100 毫秒。所以目前的渲染时间是 3 秒。

如果给 .card 加上content-visibility: auto; 会增加 3 次验证（300 毫秒），并且有两个 .card 会被渲染（2秒），所以总渲染时间是 2.3 秒。

如果给所有元素加上 content-visibility: auto; 会增加 33 次验证（3300 毫秒），并且有一个半 .card 会被渲染（1.5 秒），所以总渲染时间将是 4.8 秒。

所以 content-visibility 对于内部渲染成本较高的元素块效果最好。

也许浏览器未来可能会做一些优化，不过暂时还没找到相关的信息，所以就现在来说，给所有元素加 content-visibility，开销应该是大于收益的