Timeline面板

Timeline面板是整个面板里面最复杂的一个面板，涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息。
你可以充分利用这个面板来分析你的网页的程序性能问题。

概述

下图是从Google官方网站中介绍Timeline面板的图贴到这里，该面板主要包括4大块窗格(Pane)：

  1. Controls 录制开关和控制录制过程中需要记录哪些信息。
  2. Overview 网页性能的概要信息。
  3. Flame Chart CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。
  4. Details 当选择一个指定的事件后，会显示这个事件的更多信息；当没有选择事件时，会显示指定的时间帧信息。

Flame Chart里面的虚竖线含义：蓝色标记DOMContentLoaded事件；绿色标记第一次的绘制时间点；红色代表load事件。