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

Question

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

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

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

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

Here is a video recorded at 60fps with Chrome's fps counter with and without profiling the code.

如您所见，从没有分析器的大约 9fps 到运行分析器的 40fps。

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

有什么想法吗？

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

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

附加说明：在此测试中，所有 Chrome 扩展程序都被禁用。

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

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

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

Answer 1

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

我一直注意到悬停时的性能间歇性波动。有时它像黄油一样光滑，有时超级笨拙。当试图用分析器确定问题时，问题就会自行解决。我想不通。

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

当积极使用分析器时，很可能开发工具经过优化，它们几乎不使用 CPU/RAM（如 preventing elements panel updates），因为我们试图获得准确的图片或性能应用程序本身。

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

您可能通过纠正一个重要的潜在性能问题来解决根本问题，因此开发工具的额外开销不再影响您。然而，即使在阳光下的每一次性能优化之后，我仍然会感到手忙脚乱（但事实证明这是一个有用的练习，所以感谢 devtools！）。看来我的 DOM 树太复杂了，我的计算机上的开发工具无法顺利跟上（数百个 SVG 路径，每个路径有数百个数据点）。