javascript - 如何解释铬火焰图表中的间隙

Question

我试图更好地理解如何解释铬火焰图。
在下图_changeHandler中显示为四个不同的块。但是我知道事实上它只被调用一次。

我在这里看到了一个类似的问题，声称这可能是一个错误，但那是四年前的事了：
Chrome devtools profile 火焰图中的这个差距是什么意思

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

真正的问题是它确实使整个图表无效。图的底部是片段，但顶部是相同的功能。我完全不知道如何理解这一点。

当使用 CPU 限制时，问题会成倍恶化。请看第二张图，它与第一张图的操作相同，但 cpu 节流设置为 5 倍减速。
“函数调用”下的碎片条是单个函数调用，由于某种原因它被分成数百个部分。

Answer 1

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

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

来源：与 DevTools 工程师聊天

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