performance - 在 chrome 中的 React 应用程序中不断“渲染”屏幕外元素
问题描述
我正在努力提高具有许多组件的复杂 React 应用程序的性能。该应用程序加载用户创建的“列表”(细节不重要),其中的每个项目都呈现为 React 组件。如果列表中有很多项目,性能就会开始受到影响。
如果我在不与应用程序交互的情况下运行 Chrome 分析器,则性能配置文件如下所示:
如您所见,在大部分空闲时间内,CPU 似乎接近“渲染”极限,尽管几乎没有实际的绘画发生。仅当列表太长以至于溢出屏幕时才会发生这种情况。为什么会发生这种情况,有什么治疗方法?
解决方案
我不知道 Chrome 究竟为什么会这样,但看起来在视口之外的内容越多,Chrome 在这个渲染过程上花费的 CPU 周期就越多。事实证明,这可以通过使用 CSS 属性来解决:
content-visibility: auto;
基本上,它的作用是告诉 Chrome,如果它们不在屏幕上,则不要费心使用此属性集进行渲染元素的复杂工作。它只是为他们保留空间(与做事的方式大致相同visibility: hidden
)。更多信息在这里。
就我而言,一旦将此属性应用于<li>
列表中的元素,Chrome 分析器中观察到的空闲渲染过程几乎完全停止,并且应用程序的响应速度明显加快。
请注意,如果没有设置内容的高度,您还需要设置contain-intrinsic-size
属性,这是您对元素将占据的垂直空间的最佳猜测。Chrome 将使用它,直到元素滚动到视图中,此时它将计算出实际高度。
一个警告:Chrome(我假设其他实现该属性的浏览器)似乎不会重新计算具有此属性集的元素的大小,即使它们在屏幕上也是如此。因此,我需要设置content-visibility: visible
那些<li>
高度可能需要动态改变的元素。
虽然这对我有用,但我很想听听任何知道为什么 Chrome 为屏幕外元素做这么多工作的人,即使在应用程序空闲时也是如此。
推荐阅读
- excel - 删除具有特定条件的重复项
- linux - 命令“剪切”不显示最后一列 CSV
- bash - 脚本检查已建立连接的数量,如果连接太多,则重新启动应用程序
- sql - 从包含累积和增量条目的表中查找滞后累积总计
- macos - Mojave 上的 GLUT 批处理运动回调?
- android - SSL 证书异常“未找到证书路径的信任锚”
- javascript - 计算样式不以图形方式显示
- javascript - 如何计算安装了多少个 React 组件实例?
- javascript - Axios/AJAX POST 到 Google 脚本会出现 CORS 错误
- python - 生成在某个范围内增加 0.1 的连续数字列表