如何解释铬火焰图中的差距

Question

我正在努力更好地理解如何解释铬火焰图表.
在下面的图表_changeHandler中显示为四个不同的块.但事实上,我知道它只被召唤一次.

我在这里看到了一个类似的问题,声称这可能是一个错误,但那是四年前:
这个差距在Chrome devtools配置文件火焰图中意味着什么

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

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

使用cpu限制时,问题会变得更加严重.看第二张图片,它与第一张图片的操作相同,但cpu限制设置为5倍减速.
"函数调用"下的碎片条是单个函数调用,由于某种原因,它在数百个部分中被分割.

Answer 1

事实是，我们通过采样获取 JS 函数数据（与我们通过检测启动/停止获取的本机事件不同）。因此，在内部，只有 4 个样本进入上述函数。我们不知道它是执行了一次、四次还是 100 次，但我们尽力将它们粘合在一起，以便只要样本相邻，它就会显示为一次调用。

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

来源：与 DevTools 工程师聊天

如果您想私下提交重现的网址/步骤，团队可以查看。他们认为他们修复了此类错误。