我正在努力提高包含许多组件的复杂 React 应用的性能。该应用程序加载用户创建的“列表”（细节不重要），其中的每个项目都呈现为 React 组件。如果列表中有很多项，性能就会开始下降。
如果我在不与应用交互的情况下运行 Chrome 分析器，则性能配置文件如下所示：
如您所见，在大部分空闲时间内，CPU 似乎接近“渲染”极限，尽管几乎没有实际的绘画发生。仅当列表太长以至于溢出屏幕时才会发生这种情况。为什么会发生这种情况，有什么治疗方法？
【问题讨论】：
标签： performance google-chrome rendering
我不完全知道为什么Chrome 会这样，但是看起来越多的内容在视口之外，Chrome 在这个渲染过程中花费的CPU 周期就越多。事实证明，这可以通过使用 CSS 属性来解决：
content-visibility: auto;
基本上，它的作用是告诉 Chrome，如果它们不在屏幕上，则不要费心使用此属性集进行渲染元素的复杂工作。它只是为它们保留空间（与visibility: hidden 的方式大致相同）。更多信息here.
在我的例子中，一旦将此属性应用于列表中的 <li> 元素，Chrome 分析器中观察到的空闲渲染过程几乎完全停止，并且应用程序变得显着更多反应灵敏。
注意，如果没有设置内容的高度，你还需要设置contain-intrinsic-size属性，这是你对元素将占据的垂直空间的最佳猜测。 Chrome 将使用它，直到元素滚动到视图中，此时它会计算出实际高度。
一个警告：Chrome（我假设其他实现该属性的浏览器）似乎不会重新计算具有此属性集的元素的大小，即使它们在屏幕上也是如此。因此我需要在那些高度可能需要动态改变的<li>元素上设置content-visibility: visible。
虽然这对我有用，但我很想听听任何知道为什么 Chrome 会在应用程序空闲时为屏幕外元素做如此多工作的人。
【讨论】：