时间戳

首页 > 解决方案 > 内容可见性自动与延迟加载内容性能

javascript - 内容可见性自动与延迟加载内容性能

问题描述

content-visibility: auto有没有人测试过使用Chrome 85 中的新 css 功能与其他延迟加载方法之间的性能差异的基准？将当前使用 JavaScript 的延迟加载切换到使用 CSS 是否值得content-visibility: auto？

标签： javascriptcssgoogle-chromelazy-loadingperformance-testing

解决方案

web.dev 上有一篇关于此的好文章。

关键的收获是，在他们的一个非常长的页面示例中，渲染速度提高了 7 倍，在低端移动设备上，这显然会被大大放大。

在我们的示例中，我们看到渲染时间从 232 毫秒提升到 30 毫秒。这是 7 倍的性能提升。

因此我们可以推断，如果页面在 Mac 上从 232 毫秒变为 30 毫秒，那么在中端手机上可能高达 1 秒与 120 毫秒，因为 CPU 慢了大约 4 倍。

旁注： 对于 CPU 速度差异，Lighthouse 存储库中的这个页面在底部有一个很好的表格，解释了高端笔记本电脑与中低端手机的相对性能，只是为了让你知道我在哪里减速了 4 倍.

延迟加载和延迟加载的区别content-visibility: auto

这不是延迟加载的替代品。如果您每次都必须在两者之间进行选择，请选择延迟加载！

延迟加载甚至在需要时才请求数据（如果正确完成）。content-visibility: auto意味着浏览器仍然会请求所有数据，只是不会渲染它。

这篇文章中的这个 codepen可以让你确认这一点。如果您打开网络选项卡并重新加载页面，您将看到所有资源都已下载，但如果您保留以下 CSS，渲染时间会大大降低（如果您删除它，您会看到渲染时间增加）

.story {
  content-visibility: auto;
  contain-intrinsic-size: 100px 1000px;
}

由于站点上的大多数速度问题都归结为网络请求和通过网络发送的数据，因此仍然需要延迟加载，并且远远优于仅添加content-visibility: auto到每个部分。

我应该使用它吗？

我的意思是，是的，我愿意。

假设您的页面结构正确，您应该没有任何问题。设置事物的内在高度和宽度是我需要进行更多调查的事情，如果你弄错了，这是否对累积布局移位有任何影响。

旁注：据我了解，如果您弄错了容器的尺寸，它将像这样工作，contain: paint因此您将不会获得完全相同的好处。这纯属猜想，请勿将此作为答案的一部分！

如果您的用户群主要在移动设备上使用 Chrome（根据 caniuse.com，占所有浏览器的 35%），我会特别考虑实施它，因为它在 Chrome 上受支持。

最坏的情况是它永远不会在其他浏览器中实现（尽管 Firefox 已经在考虑实现它，而 Edge 显然已经支持 Chromium）。

在这个阶段，你有一个可能会被弃用的 CSS 属性，为了一两个千字节，它不会受到伤害（假设它不会像我之前所说的那样对 CLS 产生负面影响）！

推荐阅读