Reactjs 应用程序因打开的 Chrome 开发工具而变慢

Posted 2023-02-19

【中文标题】Reactjs 应用程序因打开的 Chrome 开发工具而变慢

【英文标题】：Reactjs app slows down with open Chrome dev tools

【发布时间】：2016-08-01 12:30:48

【问题描述】：

我已经用 React、Redux 和 React Router 构建了相当大的 webapp。它工作正常，直到我在 Chrome 中打开开发工具并且它明显减慢了 100 倍。我尝试在 Chrome 中分析应用程序，但是当我再次开始使用 Chrome 进行分析时，它开始工作的速度与关闭开发工具一样快，一切正常。

还检查了 Safari 和 Opera - 他们的开发工具也会降低 webapp 的速度。为什么 React/Chrome 会如此严重地影响性能？这是否意味着我误用了 React 或者这是 React+Chrome 的常见问题？有什么解决办法吗？

【问题讨论】：

你能把它缩小到一个或两个起作用的组件吗？

您能在我们可以测试的地方获取应用程序的实时副本吗？

禁用所有 Chrome 扩展有什么影响吗？

您是否将任何内容记录到控制台？当开发工具打开时，日志消息会减慢一切。

【参考方案1】：

我今天注意到的一件事是 React Tools 扩展在某些情况下会显着影响 React 应用程序的性能。由于扩展的目的是提供 React 组件的实时视图，因此它会尝试在页面更改时更新其表示，并且在一些严重的突变上会增加延迟。

在我的例子中，我有一个大约 650 行的表格，可以通过单击列标题进行排序。如果没有打开开发工具窗格，一切工作都非常顺利（页面更新在一秒钟内），但是一旦我打开开发工具并切换到“反应”选项卡，整个选项卡（我的页面和开发工具窗格）对额外的点击没有响应表格排序后 3-4 秒。