Chrome 开发工具的性能分析结果中的侦听器答案

【问题标题】：Listeners in Chrome dev tools' performance profiling resultsChrome 开发工具的性能分析结果中的侦听器
【发布时间】：2023-10-09 04:06:01
【问题描述】：

我一直在使用 Chrome 开发工具分析一个 React 应用程序，我发现Listener 计数呈线性增长。看看下面的截图。 Listeners 为橙色。

我将其缩小为在p 标签内呈现一个简单的倒计时值。剩余时间使用 setInterval 函数每 1000 毫秒生成一次，然后在 p 标记内格式化和呈现。

我使用create-react-app 创建了一个简单的 React 应用程序，并修改了 App.js 的 App 组件中的代码以每秒更新 Date.now() 的值，当我在其上运行分析器时，我得到了相同的结果结果。

class App extends Component {
  state = {
    text: '',
  };

  loop() {
    this.setState({ text: Date.now() });
  }

  componentWillMount() {
    this.timer = setInterval(this.loop.bind(this), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return (
      <div className="App">
        <p>{this.state.text}</p>
      </div>
    );
  }
}

export default App;

这些所谓的Listeners 开头是什么？
增加的 Listener 是否可以指示 memory leak？
如果是，如果必须显示倒计时或每秒或更快更新时间/剩余时间的计时器？

顺便说一句，您是否也看到 JS 堆的使用率似乎也在上升，尽管有所有这些垃圾收集？这很奇怪，不是吗？

干杯

【问题讨论】：

setInterval 是否被多次调用？因为你永远不会取消那个计时器。
@EvanTrimboli 我们的实际代码会在卸载时清除间隔。不是这个。抱歉，我无法将其包含在示例中。
包含一个不代表您的代码的示例有什么意义？
通常，毫无意义。但是在这种情况下，我确信很明显，卸载和重新安装它并没有太多的事情发生。不过，我的坏。无论如何，Listener 的数量与真实的 DOM 变化是一样的。
我也很想知道这些监听器的重要性以及它们与垃圾收集的关系。

标签： javascript reactjs google-chrome-devtools profiling setinterval

【解决方案1】：

这里是 DevTools 技术作家和开发者倡导者。

我能够重现可能的内存泄漏，因此我在 create-react-app 存储库中提交了一个错误：https://github.com/facebook/create-react-app/issues/4037

我将根据该问题的结果更新此答案。

关于您的问题：

这些所谓的侦听器是从什么开始的？

这些是事件监听器。如果您在 DOM 树中选择 html 元素，然后检查事件侦听器选项卡，您可以看到页面上已定义的所有侦听器。确保启用 Ancestors 复选框以在 html 元素的子元素上显示侦听器。在这种情况下，我希望看到越来越多的听众，但我没有，所以我怀疑这可能是 create-react-app 中的一个错误。

增加的 Listener 是否表明存在内存泄漏？

是的，这是可能的。

【讨论】：

感谢您在 React 问题页面上发帖。看起来没什么好担心的。

【解决方案2】：

尝试使用 React 生产构建运行您的示例，此问题似乎与 React 开发构建有关。

我刚刚重现了您的问题并尝试了生产版本，发现它没有发生，并且侦听器图表是平坦的

【讨论】：