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

Posted

技术标签:

【中文标题】Chrome 开发工具的性能分析结果中的侦听器【英文标题】:Listeners in Chrome dev tools' performance profiling results 【发布时间】:2018-06-20 10:20:38 【问题描述】:

我一直在使用 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 变化是一样的。 我也很想知道这些监听器的重要性以及它们与垃圾收集的关系。 【参考方案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 开发构建有关。

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

【讨论】:

以上是关于Chrome 开发工具的性能分析结果中的侦听器的主要内容,如果未能解决你的问题,请参考以下文章

查看页面性能的chrome插件开发

利用Chrome的Performance工具排查页面性能问题(原叫timeline)

JS 数组遍历的几种方式,性能分析

SVG 动画:Chrome 中的迟缓/性能不佳

Chrome:性能数据 API

Jmeter(四十九)_常用的性能测试监听器