相关疑难解决方法(0)

在开发我的 React 应用程序时，在 chrome 中打开 devtools 时，应用程序变得非常缓慢。关闭它们或在隐身模式下工作得又快又好。我尝试禁用所有扩展并遇到同样的问题。当我更新 chrome（现在版本 80.0.3987.132）时，这似乎是最近开始发生的。

我不确定从哪里开始调试这个问题，但在我的应用程序上开发变得非常令人沮丧。

任何建议或帮助调试将不胜感激。

我正在使用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 没有性能问题，但希望将来遇到类似问题的人会遇到类似的修复。
如果有人弄清楚这一点，请发表评论。