如何解释铬火焰图中的差距 [英] How to interpret gaps in chrome flame charts

问题描述

我正在尝试更好地理解如何解释镀铬火焰图。

在下面的图表中， _changeHandler 显示为四个不同的块。
但事实上，我知道它只被调用一次。

我在这里看到一个类似的问题，声称这可能是一个错误，但那是四个几年前：

问题：

在哪种情况下，chrome perf工具会在同一函数调用的火焰图中显示间隙？

真正的问题是它确实使整个图形无效。图形的底部碎片但顶部部分是相同的功能。我根本无法弄清楚如何理解这一点。

使用cpu限制时，问题会变得更加严重。
查看第二张图片，它与第一张图片的操作相同，但cpu限制设置为5x减速。

函数调用下的碎片条是单个函数调用，某种原因，它在数百个部分中分散。

解决方案

< blockquote>

事实上，我们通过抽样获得JS函数数据（与我们通过检测启动/停止获得的本机事件不同）。所以内部只有4个样本落入上述功能。我们不知道它是执行了一次还是4次或100次，但是我们会尽力将它们粘合在一起，只要样品是相邻的，它就像一次调用一样。

但有时这种逻辑会神秘地失败。大多数情况下，这是因为在对JS堆栈进行采样时遇到了一些问题（如果某些内联或本机函数位于顶部，我们有时无法正确展开堆栈）。

来源：与DevTools工程师聊天

如果你想私下提交一个url /步骤来重现，团队可以查看它。他们认为他们修复了这类错误。

I'm trying to better understand how to interpret chrome flame charts.
In the below chart _changeHandler is shown as four distinct blocks. However I know for fact that it's only being called once.

I saw a similar question here, which claims this might be a bug, but that was four years ago:
What are this gap mean in Chrome devtools profile flame chart

Question:
In which case would chrome perf tools show gaps in the flame chart for the same function call ?

The real problem is that it really invalidates the entire graph. The bottom of the graph fragments but the top parts are the same function. I can't figure out how to make sense of that at all.

When using cpu throttling, the problem becomes exponentially worse. Look at the second picture, it's the same operation as the first graph, but with cpu throttling set to 5x slowdown.
The fragmented bar under "Function Call" is a single function call, for some reason it's fragmented in hundreds of sections.

解决方案

Thing is, we get the JS function data by sampling (unlike native events that we get by instrumenting start/stop). So internally it's just 4 samples that landed into the said function. We don't know if it was executed once or 4 times or 100 times, but we do our best to glue them so as it appeared as one call as long as the samples are adjacent.

But sometimes this logic mysteriously fails. Most of the time, this is because of some problems while sampling the JS stack (if some inlined or native function is on top, we sometimes fail to unwind the stack properly).

Source: Chat with a DevTools engineer

If you want to privately submit a url / steps to reproduce, the team can check it out. They thought they fixed this category of bugs.

这篇关于如何解释铬火焰图中的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！