使用Intersection observer API或CSS content-visivilty规则进行Lazy加载的



我们正试图通过实现";无限滚动";在我们的网页上使用Lazy加载,使用Intersection observer API或CSS content-visivilty规则。我需要知道哪一个更有效?

谢谢,

这在一定程度上取决于您的站点。我想马上说,将content-visibility: auto设置为折叠下方的部分是提高渲染性能的一种已知模式(只需确保也使用contain-intrinsic-size以避免布局变化。让浏览器尽可能只使用HTML和CSS通常会带来更好的性能(前提是所有操作都正确(。

然而,更好的难题可能是研究是什么导致LCP测量缓慢。如果页面上有多个图像,更改图像的fetchpriority可以告诉浏览器首先加载主图像。查看脚本顺序并确保在可能的情况下推迟所有代码是LCP的另一个轻松胜利。大多数时候,还有其他机会可以更显著地改变LCP测量(除非DOM真的很庞大,例如David Bowie的新闻页面(。

最新更新