在使用 Chrome 进行分析时，React 中的性能显着提高

Question

我正在使用React开发一个 gant-ish 调度程序。调度程序由数据生成的 SVG 组成。数据由鼠标事件和业务逻辑操作。

最近，性能成为一个问题（可能是由于一般的编码不佳），所以我决定使用Chrome 的分析器对其进行分析（同样的异常发生在多个其他网络浏览器中，见下文）。

但是，我立即注意到在运行分析器时性能显着提高！

这对我来说根本没有多大意义，因为通常分析器会降低性能。

这是使用 Chrome 的 fps 计数器以 60fps 录制的视频，其中包括和不分析代码。

正如您所看到的，从没有分析器的情况下大约 9fps 跃升到运行分析器时的 40fps。

我有一种感觉它与mouseevent频率有关，但谷歌并没有太大帮助（鼠标移动事件是一个由调度程序订阅的 RxJs 流）。

有任何想法吗？

分析器结果的静态照片：
缩小

放大
“BubbleCopy”和右边的那个是我做的。如果鼠标移动导致状态更改，则在每个循环结束时手动调用 ForceUpdate() 。
（我故意选择使用 setState 或 prop 更改来执行此操作，因为我需要更频繁地更改状态，而不是完全重新渲染并需要更深层次的对象结构。此外，在进一步测试中，我已将渲染分开发生在设定的时间段后，我将鼠标事件分开以在设定的时间段后轮询鼠标位置，并且我是否已将这些时间段更改为同时发生/倍数/随机但无济于事。）

附加说明：此测试中禁用了所有 Chrome 扩展程序。

编辑：跨各种浏览器测试：

1. Chrome - 分析提高了性能
2. Edge - 分析提高了性能
3. Internet Explorer - 大声笑。
4. Firefox - 分析提高了性能，但总体上基本性能更好。

更新：性能问题是由使用 JSON.parse(JSON.stringify(bubble)) 深度复制“气泡”引起的。将其更改为recursiveDeepCopy函数大大提高了性能。
这并不能解释为什么分析代码使它更快，也不能解释为什么 Firefox 没有性能问题，但希望将来遇到类似问题的人会遇到类似的修复。
如果有人弄清楚这一点，请发表评论。

Answer 1

我遇到了同样的问题，几乎不折不扣，大量的 SVG，鼠标悬停时的数据操作。

我一直注意到悬停时的性能间歇性波动。有时它像黄油一样光滑，有时又超级粘稠。当尝试使用探查器识别问题时，问题会自行解决。我想不通。

看来这个问题实际上是由开发工具本身引起的。我通常在开发工具打开的情况下进行开发，因为我经常引用它。但有时，当刷新整个构建或当天第一次启动时，性能会神奇地提高。在这些时候，devtools 没有打开。

当积极使用分析器时，开发工具可能会以一种几乎不充分利用 CPU/RAM 的方式进行优化（例如阻止元素面板更新），因为我们试图获得应用程序本身的准确图片或性能。

我最好的猜测是，当您有数百个大型、复杂的元素快速变化时，由于元素面板中的更新，开发工具本身会显着影响性能。

您可能通过纠正重大的底层性能问题来解决根本问题，因此开发工具的额外开销不再对您产生影响。然而，即使在阳光下的每一次性能优化之后，我仍然遇到卡顿的情况（结果证明这是一个有用的练习，所以感谢开发工具！）。看来我的 DOM 树太复杂了，开发工具无法在我的计算机上顺利跟上（数百个 SVG 路径，每个路径有数百个数据点）。