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