Chrome 时间轴工具-简介

简单介绍：
时间为横向说明的使用方法：
Timeline面板概述
Timeline(时间轴)面板包含四个窗格：

Controls： 开始录制，停止录制，并配置在录制过程中捕获的信息。
Overview： 页面性能的高级摘要。 更多关于这一点见文章下面。
Flame Chart： CPU 栈跟踪的可视化。
你可能会在你的火焰图表看到一到三个点和垂直线。 蓝线代表DOMContentLoaded事件。 绿线表示第一次绘制的时间。 红线代表load事件。
Details： 选择事件时，此窗格显示有关该事件的更多信息。 当未选择任何事件时，此窗格显示有关所选时间范围的信息。
时间轴面板注释

概述窗格
Overview(概述)窗格由三个图表组成：

FPS： 每秒帧数。绿色条越高，FPS越高。FPS曲线图上方的红色块表示长帧，这可能是jank的候选。
CPU： CPU资源。此区域图表指示哪些类型的事件消耗CPU资源。
NET：每个彩色条代表一个资源。条越长，表示检索该资源所花费的时间越长。每个条的较亮部分表示等待时间（从请求资源到下载第一个字节之间的时间）。较暗的部分表示加载时间（下载第一个到最后一个字节之间的时间）。
彩色条代表的含义如下：

HTML文件是 blue (蓝色) 的。
脚本是 yellow (黄色) 的。
样式表是 purple (紫色) 的。
媒体文件是 green (绿色) 的。
其他杂项资源是 grey (灰色) 的。