在 chrome 中的 React 应用程序中不断“渲染”屏幕外元素

Question

我正在努力提高具有许多组件的复杂 React 应用程序的性能。 该应用程序加载用户创建的“列表”（细节不重要），其中的每个项目都呈现为 React 组件。 如果列表中有很多项目，性能就会开始受到影响。

如果我在不与应用程序交互的情况下运行 Chrome 分析器，则性能配置文件如下所示：

如您所见，在大部分空闲时间内，CPU 似乎接近“渲染”极限，尽管几乎没有实际的绘画发生。 仅当列表太长以至于溢出屏幕时才会发生这种情况。 为什么会发生这种情况，有什么治疗方法？

Answer 1

我不知道 Chrome 究竟为什么会这样，但看起来在视口之外的内容越多，Chrome 在这个渲染过程上花费的 CPU 周期就越多。 事实证明，这可以通过使用 CSS 属性来解决：

content-visibility: auto;

基本上，它的作用是告诉 Chrome，如果它们不在屏幕上，则不要费心使用此属性集进行渲染元素的复杂工作。 它只是为它们保留空间（与visibility: hidden的方式大致相同）。 更多信息在这里。

就我而言，一旦将此属性应用于列表中的<li>元素，Chrome 分析器中观察到的空闲渲染过程几乎完全停止，并且应用程序的响应速度明显加快。

请注意，如果没有设置内容的高度，您还需要设置contain-intrinsic-size属性，这是您对元素将占据的垂直空间的最佳猜测。 Chrome 将使用它，直到元素滚动到视图中，此时它将计算出实际高度。

一个警告：Chrome（我假设其他实现该属性的浏览器）似乎不会重新计算具有此属性集的元素的大小，即使它们在屏幕上也是如此。 因此我需要设置content-visibility: visible在那些高度可能需要动态改变的<li>元素上。

虽然这对我有用，但我很想听听任何知道为什么 Chrome 为屏幕外元素做这么多工作的人，即使在应用程序空闲时也是如此。