Chrome开发工具中的监听工具的性能分析结果

Question

我一直在使用Chrome开发工具分析一个React应用程序,我发现了一个线性增加的Listener计数.看一下下面的截图.该Listeners是橙色.

我将其缩小为p标签内部的简单倒计时值渲染.剩余时间是每隔1000毫秒使用setInterval函数生成的,然后在p标记内格式化和渲染.

我创建了一个简单的React应用程序,使用create-react-app并修改了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的开头是什么？

• 增加的倾听者是否可以指示memory leak？

• 如果是,如果你必须显示倒计时或计时器来更新每秒或更快的时间/剩余时间,你怎么能避免这种情况？

顺便说一下,你是否也看到JS Heap的用法似乎也在上升,尽管所有这些垃圾收集？这很奇怪,不是吗？

干杯

Answer 1

DevTools 技术作家和开发人员在这里提倡。

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

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

关于您的问题：

这些所谓的 Listeners 是什么？

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

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

是的，这是可能的。