我将减少废话并直接跳到您需要添加的两行 css 以将您的性能提高大约7 倍：
{ content-visibility : auto ; contain-intrinsic-size : 1px 5000px ; }
你为什么需要这个？
现在的网站需要优化和高性能，网络上的用户注意力很短。根据Doherty 阈值响应时间为 400 毫秒。
现在想象一下像 Facebook、Instagram 等这样的网站需要更多的时间然后门槛？没有人会再回到这些网站。
你什么时候用这个？
最常见的用例是当您有大量的数据列表/网格需要在应用程序的挂载时呈现。
示例：静态网站，如规格或文档或旅游博客等……
如果您有任何其他用例，希望在评论中听到。
它是如何工作的 ？
浏览器通过使用您应用content-visibility: auto的类跳过渲染工作来表现智能。
浏览器需要知道 DOM 的布局才能渲染，那些不在视口中的元素不会被渲染，并且实际上有你提供的contain-intrinsic-size空框。
总而言之，所有渲染都是延迟的，直到它到达浏览器使用您提供的宽度、高度和样式渲染实际布局的视口。
PS：不在视口之外的布局会有一个height: 0 ，所以当延迟布局来到视口时，它会堆叠在一起，所以这就是为什么需要 contains contain-intrinsic-size ，但是，不用担心这些只是一个后备值，浏览器在视口中呈现时会呈现实际值。
浏览器支持
content-visibility依赖于CSS Containment Spec 。虽然截至撰写本文时，大多数铬技术目前都支持content-visibility 。
然而，content-visibility支持对于在高端系统上具有功能来说并不是一件坏事，但是随着 Web 开发的进展，它很快也会在所有浏览器中得到支持。希望 ：）
备择方案
有使用 JavaScript 来提高性能的替代方法，例如使用List 虚拟化，但是谁想要 100 行js并在你可以在2 行css中完成时维护它
进一步阅读：你可以在 js 中做到这一点：
反应窗口
反应虚拟化
优秀的演示和解释：
进一步阅读：
https://web.dev/content-visibility/#support
https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
问候，
原文： https://dev.to/mnathani/two-lines-of-css-that-boosts-7x-rendering-performance-4mjd