Performance 面板中的 bottom-up 可以看到 receiveComponent 下耗时的所有调用栈，在

看图说话

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

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

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

ABCD 对应的耗时比例。

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

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

The main thread is considered "blocked" any time there's a Long Task—a task that runs on the main thread for more than 50 milliseconds (ms).

根据上面这篇文章的内容，超过 50ms 的任务都称为长任务。其中超出的部分会用红色斜线填充，如下图所示。

如何减少 TBT 上面的文章也给出了参考文章，后面有空可以再仔细研究一下。