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 开发工具的性能分析结果中的侦听器的主要内容,如果未能解决你的问题,请参考以下文章