html - 我可以在所有元素上使用内容可见性吗？

Question

因此，使用 content-visibility通过跳过不在视口(viewport)中的内容来改善页面加载时间，是否有真正的原因阻止它在所有 DOM 元素中使用？

而不是使用

.card {
    content-visibility: auto;
}

为什么不用

* {
    content-visibility: auto;
}

Answer 1

我认为简短的回答是您会失去一些“内容可见性”的性能优势。

为什么？

正如他们所说，“世上没有免费的午餐”，所以总会有交易。内容可见性通过不渲染不在屏幕上的 dom 部分来提高性能 (info) , 所以它会先验证该部分是否需要渲染，然后执行渲染过程。

因此您要添加一些处理(验证)并删除其他处理(渲染)。只要您删除的内容大于添加的内容，您就会获得性能改进。

如果你使用类似的东西

* {
    content-visibility: auto;
}

您基本上是在告诉浏览器在渲染之前验证所有内容。这意味着节点及其子节点将被递归验证。

让我做一个非常简单和夸大的例子来解释我的意思(这里的数字根本不是真实的)

假设您有一个包含三个 .card 的屏幕，其中 1 个半最初是可见的，每个有 10 个 child 。

比方说，每张卡片在 1 秒内呈现，每个节点验证花费比方说 100 毫秒。

因此当前渲染时间为 3 秒

将 content-visibility: auto; 应用于 .card 将导致 3 次验证(+300 毫秒)并且其中一张卡片不会呈现(-1 秒) 所以总渲染时间为 2.3 秒

将 content-visibility: auto; 应用到 * 将导致 30 次验证(+3000 毫秒)并且有一半的卡片将不会呈现(-1.5秒)所以总渲染时间为 4.5 秒

因此 content-visibility 最适合在内部渲染成本高昂的元素 block 。

浏览器 future 可能会进行一些优化；我没有找到有关优化的信息，但目前该功能还很新，这样使用它可能会导致问题。