Chrome开发者工具性能分析结果中的侦听器 [英] Listeners in Chrome dev tools' performance profiling results

问题描述

我一直在使用Chrome开发人员工具对React应用进行性能分析，并且发现Listener的数量呈线性增长.看一下下面的截图. Listeners是橙色的.

I have been profiling a React app using Chrome dev tools and I've discovered a linearly increasing Listener count. Take a look at the screenshot below. The Listeners are in orange.

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

I narrowed it down to a simple countdown value render inside p tags. The remaining time is generated using setInterval function every 1000ms and then formatted and rendered inside the p tags.

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

I created a simple React app using create-react-app and modified the code inside the App.js's App component to update the value of Date.now() every second, and when I ran the profiler on it, I got the same result.

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首先是什么?

  • What are these so called Listeners to begin with?

    增加的侦听器是否可以表示memory leak?

    Is the increasing Listener could indicative of a memory leak?

    如果是，如果必须显示倒数或 计时器每秒更新一次时间/剩余时间或更快?

    If yes how can you avoid this if you have to display a countdown or timer which updates the time/remaining time every second or faster?

    顺便说一句，尽管所有这些垃圾回收，您是否还看到JS Heap的使用量似乎也在上升?那很奇怪，不是吗?

    BTW, do you also see that the JS Heap usage seems to be going up as well, despite all those garbage collections? That is weird, isn't it?

    欢呼声

    推荐答案

    DevTools技术作家和开发者倡导在这里.

    DevTools tech writer and developer advocate here.

    我能够重现可能的内存泄漏，因此我在create-react-app存储库中提交了一个错误:

    I was able to reproduce the possible memory leak, so I filed a bug on the create-react-app repo: https://github.com/facebook/create-react-app/issues/4037

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

    I'll update this answer depending on the outcome of that issue.

    关于您的问题:

    这些所谓的监听器"首先是什么?

    What are these so called Listeners to begin with?

    这些是事件侦听器.如果在DOM树中选择html元素，然后检查事件侦听器"选项卡，则可以看到页面上已定义的所有侦听器.确保已启用祖先复选框，以显示html元素的子级上的侦听器.在这种情况下，我希望看到的侦听器数量会增加，但是我没有，所以这就是为什么我怀疑它可能是create-react-app中的错误.

    These are event listeners. If you select the html element in your DOM Tree and then inspect the Event Listeners tab, you can see all listeners that have been defined on the page. Make sure that the Ancestors checkbox is enabled to show listeners on the html element's children. In this case, I would expect to see an increasing number of listeners, but I'm not, so that's why I suspect it might be a bug in create-react-app.

    不断增加的侦听器是否可以指示内存泄漏?

    Is the increasing Listener could indicative of a memory leak?

    是的，有可能.

    这篇关于Chrome开发者工具性能分析结果中的侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！