我试图更好地理解如何解释铬火焰图。
在下面的图表中_changeHandler显示为四个不同的块。
但我知道事实上它只被调用一次。
我在这里看到了一个类似的问题，声称这可能是一个错误，但那是四年前的事了：
Chrome devtools 配置文件火焰图中的这个差距意味着什么
问题：
在什么情况下，chrome 性能工具会在同一函数调用的火焰图中显示间隙？
真正的问题是它确实使整个图失效。图形的底部是片段，但顶部部分是相同的函数。我根本不知道如何理解这一点。
当使用 CPU 限制时，问题会变得更加严重。
看第二张图，它的操作与第一张图相同，但 CPU 节流设置为 5 倍减速。
“函数调用”下的碎片栏是单个函数调用，由于某种原因它碎片化为数百个部分。
事实是，我们通过采样获取 JS 函数数据（与我们通过检测启动/停止获取的本机事件不同）。因此，在内部，只有 4 个样本进入上述函数。我们不知道它是执行了一次、四次还是 100 次，但我们尽力将它们粘合在一起，以便只要样本相邻，它就会显示为一次调用。
但有时这种逻辑会神秘地失败。大多数时候，这是因为对 JS 堆栈进行采样时出现一些问题（如果某些内联函数或本机函数位于顶部，我们有时无法正确展开堆栈）。
来源：与 DevTools 工程师聊天
如果你想私下提交复现网址/步骤，团队可以检查一下。他们认为他们修复了此类错误。
