html - 为什么不是内容可见性 :auto working in this simple example?

Question

我创建了两个文件，每个文件都有 100,000 div元素。第一个是slow.html :

<div>0.8562158266079849</div>
<div>0.9135280673563708</div>
...
<div>0.5053808333117775</div>
<div>0.9188260452433614</div>

第二个是 fast.html :

<style>
  div {
    content-visibility:auto;
    contain-intrinsic-size: 100vw 18.5px;
  }
</style>

<div>0.8562158266079849</div>
<div>0.9135280673563708</div>
...
<div>0.5053808333117775</div>
<div>0.9188260452433614</div>

如您所见，每个 div只是填充了一个随机的十进制数。 slow.html之间的唯一区别和 fast.html是 fast.html 有 <style>块在顶部。 slow.html加载大约需要 2.7 秒:

和 fast.html加载大约需要 17 秒:

所以 content-visibility:auto 已经减慢了页面加载速度，而不是加快了速度。我是否误解和/或误用 content-visibility ?它不是为我有大量非常简单的元素的情况而设计的吗？
我的预期用例是帮助加速内容表的呈现，因为它们只是用于内部分析的快速/简陋/一次性工具，因此不值得实现虚拟滚动。
我已经在 Chrome v89 和 v90 上进行了测试。两者的加载时间大致相同。
这是一个单行代码，可帮助您快速复制此内容:

new Array(50000).fill(0).map(_ =>`<div>${Math.random()}</div>`).join("\n")

请注意，使用 content-visibility和 contain-intrinsic-size在我之前的测试中按预期工作(大大减少了渲染时间)，但奇怪的是在这个最小的例子中不起作用。

Answer 1

事实证明(Chromium 开发人员向我解释)向 100k 个元素(Chromium 为 content-visibility:auto 元素所做的)中的每一个添加一个交集观察器的开销是昂贵的，因此它并不是真正为如此大的数字设计的的元素。
浏览器开发人员可能会在 future 使他们的算法更高效，但是如果您有很多元素，目前最好的方法是将它们嵌套到块中(每个块可能 1000 行)，而块本身具有 content-visibility:auto :

<style>
  .block {
    content-visibility:auto;
    contain-intrinsic-size: 100vw 18500px;
  }
</style>

<div class="block">
  <div>0.8562158266079849</div>
  <div>0.9135280673563708</div>
  ...
  <div>0.5053808333117775</div>
  <div>0.9188260452433614</div>
</div>
<div class="block">
  <div>0.5053808333117775</div>
  <div>0.9188260452433614</div>
  ...
  <div>0.8562158266079849</div>
  <div>0.9135280673563708</div>
</div>
...

请注意，由于这些块有 1000 个高度为 18.5 像素的 div，因此我将 18500 像素指定为 contain-intrinsic-size高度。
这具有删除 的额外好处。布局所有费用 div s 离屏 block s。我原来问题中的例子只去除了离屏 div 的渲染成本s。
您可以通过在块内嵌套块(每个块具有 content-visibility:auto 和计算出的 contain-intrinsic-size 高度)来进一步改进这一点，这样在任何给定时间只需要渲染和布局极少数元素。