1.Timeline概览
timeline是google的chrome浏览器中的一个开发者工具，它有助于前端开发者来分析页面的解析、脚本运行以及渲染、布局的情况，从而帮助开发者去优化页面的性能。
timeline有三个主要的模块：顶部的概况视图部分，记录视图部分和工具栏。
录制按钮(Record toggle)：点击开始/停止一段页面的录制
清除按钮(Clear recording)：点击清楚按钮可以清除timeline上面的记录
聚合异步事件模式按钮(Glue async events toggle)：点击以后让你能够很容易的把异步事件和他们的调用者关联起来
过滤记录(Filter records by type)：通过勾选不同类型的记录让记录面板呈现不同记录
通过一次录制，录制的每一个事件发生时都会被添加到录制面板的“瀑布流”中。记录会被归类到四个基础类型中：Loading、Scripting、Rendering和Painting，他们的颜色标识如下图：
例如，下面录制的是一个chrome加载的HTML页面。第一条记录(Send Request)是chrome发起的这个页面的http请求，接下来是一个Receive Response record，一些 Receive Data records，然后是Finish Loading record。
此外，除了查看录制详细，你还可以检查下面三个模式的录制：
Event模式通过事件分类展现所有录制的事件
Frames模式展现页面渲染的性能
Memory模式展现页面内存使用情况
1.1Event模式
事件模式提供所有录制中捕获的事件视图，并进行归类。在那里，你可看见你的应用在什么地方，什么类型的任务上耗时最多。进度条的长度与事件完成花费的时间长短是一致的。
当你选择某一时间范围内的时间视图时，记录视图也会只展示这一段时间内的记录。
1.2Frames模式
Frames模式可以监控你的应用的渲染性能。一个“frame”代表浏览器必须渲染一个单一的frame的内容展现出来——运行Javascript，监听事件，更新DOM和改变样式，重新布局和绘制页面。你的app的目标是运行60 frames/秒(FPS)，大多数的视频展现刷新频率都是60Hz的。因此，你的应用每一个frame展现的事件大约是16.6ms。
贯穿frames视图的水平线代表frame的比率目标是60fps和30fps。frame的高度与它渲染完成消耗的时间一致。填充frame的各种颜色代表每种类型的任务消耗时间所占百分比。
1.3Memory模式
内存模式展现给你的是你的应用在应用运行时的内存情况和document、DOM节点数、事件监听数的计数。
内存模式不能准确的告诉你是什么导致内存泄露，但是他能帮助你识别哪些事件可能导致内存泄露。