Performance 面板中的 bottom-up

看图说话

调用栈

从 render 开始向下，然后回到红框标注的 perform ，然后一直向下到 B 所在的 dangerouslyProcessChildrenUpdates，然后回到红框标注的 perform，最后执行了 closeAll

点击 receiveComponent 看 Bottom-Up

可以看到 receiveComponent 下耗时的所有调用栈，在点击打开各个调用栈还可以更多的耗时信息，最终找到真正的耗时操作。 有点像父子进程的关系

上图中的 parse script(script compile) 应该是 Evaluate script

Self Time

ABCD 对应的耗时比例。

Summary

Call Tree

从上往下的调用栈，就是从 Parse HTML 一直到 receiveComponent 这条线的调用栈。 可以通过过滤框搜索关键词，或者通过 group 进行分类。

Event Log

也是从上往下的调用栈，但是可以根据过滤框过滤，或者通过下拉框分类，还可以根据 Loading / Scripting 等的类型过滤。