是否有人测试过Chrome 85中使用新的CSS功能content-visibility: auto与其他延迟加载方法之间的性能差异基准？是否值得将使用JavaScript的当前延迟加载切换为使用CSS content-visibility: auto？
答案 0 :(得分：1)
关键要点在于，在他们的一个很长的页面示例中，它的渲染速度提高了7倍，在低端移动设备上，显然可以大大放大。
在我们的示例中，我们看到了从232ms渲染时间到30ms渲染时间的提升。性能提高了7倍。
因此，我们可以推断出，如果页面在Mac上从232ms变为30ms，那么在中端手机上，由于CPU的运行速度大约是4倍，因此它可能长达1秒而不是120ms。
旁注： For CPU speed differences this page from the Lighthouse repository在底部有一个漂亮的表格，用来解释高端笔记本电脑与中低端手机的相对性能，以便您知道我在哪里放慢4倍。
content-visibility: auto之间的区别这不能替代延迟加载。如果您每次必须在两次选择延迟加载之间进行选择！
延迟加载甚至在需要数据时才请求数据（如果正确完成的话）。 content-visibility: auto表示浏览器仍然会请求所有数据，只是不会呈现它们。
This codepen from the article可让您确认。如果打开“网络”标签并重新加载页面，将会看到所有资产均已下载，但是如果保留以下CSS，则渲染时间会大大缩短（如果删除它，则会看到渲染时间增加）
.story {
content-visibility: auto;
contain-intrinsic-size: 100px 1000px;
}
由于网站上的大多数速度问题都取决于网络请求，并且仍然需要通过有线延迟加载发送数据，这比仅在每个部分添加content-visibility: auto更为优越。
我的意思是，我会的。
假设您的页面结构正确，那么您应该不会有任何问题。设置事物的固有高度和宽度是我需要做的更多研究，以了解如果弄错了它是否会对Cumulative Layout Shift产生任何影响。
附带说明：据我了解，如果您弄错了容器的尺寸，它将像contain: paint一样工作，因此您不会获得完全相同的收益。这是纯粹的推测，请勿将此作为答案的一部分！
如果您的用户群主要是在移动设备（35ish percent of all browsers according to caniuse.com）上使用Chrome，因为它在Chrome中受支持，那么我会特别考虑实现它。
最糟糕的情况是，它永远不会在其他浏览器中实现（尽管Firefox已经在考虑实现它，而Edge显然是由Chromium驱动的）。
在此阶段，您可能不赞成使用CSS属性，因为一到两个千字节，它不会受到伤害（假设它不会像我前面所述对CLS产生负面影响）！