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

我不太清楚 为什么? Chrome的行为是这样的,但似乎视口外的内容越多,Chrome在渲染过程中花费的CPU周期就越多。事实证明,这可以通过使用CSS属性来修复:

content-visibility: auto;

基本上,它的作用是告诉Chrome,如果元素在屏幕外,则不要费心使用此属性集渲染元素的复杂工作。它只是为它们预留了空间(与 visibility: hidden 确实如此)。更多信息 here .

就我而言,一旦该财产被用于 <li> 列表中的元素,Chrome分析器中观察到的空闲渲染过程几乎完全停止,应用程序变得 明显地 反应更灵敏。

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

一个警告:Chrome(我假设其他实现该属性的浏览器)似乎不会重新计算具有此属性集的元素的大小,即使它们在屏幕上。因此,我需要设置 content-visibility: visible 关于这些 <李> 高度可能需要动态变化的元素。

虽然这对我来说很有效,但我很想听听任何知道为什么Chrome在应用程序空闲时对屏幕外元素做了这么多工作的人的意见。