前端性能分析工具——Timeline(一)

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节点数、事件监听数的计数。

内存模式不能准确的告诉你是什么致使内存泄露，可是他能帮助你识别哪些事件可能致使内存泄露。