Chrome Developer Tools：Timeline Panel说明

1、Timeline panel 概况

Timeline工具栏能够详细检测出Web应用在加载过程当中，时间花费状况的概览。这些应用包括下载资源，处理DOM事件, 页面布局渲染或者向屏幕绘制元素。

以下图，Timeline面板分为四个模块—控制模块，概述模块，火焰图模块，细节模块。

 

• 控制模块Control：控制开始记录，中止记录，配置一条记录要抓取信息类型，包括：JS概况，内存，重绘，截图。。
• 概述模块Overview：页面性能的一个高度总结。
• 火焰图模块Flame Chart：CPU栈的可视化描述。能够看到三条竖的虚线，蓝线表明DOM生成完毕，对应DOMContentLoaded event，绿线表明第一次绘制的时间，红色表明加载完成，对应load事件。
• 细节模块Details：当一个事件被选中，该面板显示这个事件的更多信息。若是没有事件选中，会显示选中的火焰图的信息。

2、概述模块

概述模块做为对一个页面性能的高度总结，包括3部分区域—FPS，CPU，NET。

一、FPS（Frames Per Second）

网页动画可以作到每秒60帧，就会跟显示器同步刷新，一秒内进行60次从新渲染，因此要控制每次渲染的时间不能超过16.66ms。

fps表明每秒的帧数量。绿色的柱状越高，fps越高。

绿色块上面红色区块预示着长火焰，即每帧的事件过长，有多是卡顿（动画渲染时间超过了屏幕的刷新时间）产生了。要尤为关注。

二、CPU

cpu资源。

这个面积图指出了哪一种事件消耗CPU资源。

三、NET

每种颜色的块表明一种资源，块长度越长，表明获取这种资源的的时间也越长。

每一个块中较浅颜色的部分表明了获取这种资源的等待时间（从发送请求到接收到第一个byte的时间）。

深色的部分表明资源的下载时间（第一个byte接收到最后一个byte接收的时间）。

柱子的颜色对应的资源以下：【和细节模块中颜色都是统一的】

• 蓝色（Loading）：网络通讯和HTML解析，对应html文件
• 黄色（Scripting）:Javascript执行，对应js脚本文件
• 紫色（Rendering）:样式计算和布局，即重排，对应stylesheets文件
• 绿色（Painting）:媒体文件

• 灰色（Other）：其余杂七杂八资源花费的时间
• 白色（Idle）：空闲时间

3、怎样获取一条记录

默认状况下timeline面板不显示任何数据，那么如何获取一条记录呢？

一、记录一个页面的加载过程

打开要记录的网页，打开Timeline面板，刷新页面，timeline面板会自动记录页面重载（若是不行可手动ctrl+E开始）。

二、记录页面交互

左上角灰色圆点，是录制按钮，点击后变红色，而后在页面进行相关操做后再次按下变成灰色完成录制。

因此记录页面交互步骤为，打开timeline面板，点击Record按钮，按钮在开始记录时变红色，此时执行页面交互，而后中止记录便可。

记录交互时注意：

• 记录时间越短越好—时间越短越好定位问题。
• 避免没必要要操做（什么是没必要要?好比鼠标点击，网络加载等。好比要记录点击登陆按钮的事件，就不要同时触发滚动鼠标，加载图片这些额外的事件）
• 禁止浏览器缓存
• 禁止插件扩展（避免没必要要的干扰）

经过1和2就完成了一次记录，随后Timeline就会开始分析操做过程当中的各项性能参数显示出来。

4、查看记录详情

一、细节模块中记录详情

查看记录详情就是经过“细节模块Details”来看。 在火焰图模块中，点一下选中一个事件，该事件相关的详细信息就会展现在细节模块中。

 Summary中不一样颜色表明不一样内容。

• 蓝色（Loading）：网络通讯和HTML解析
• 黄色（Scripting）:Javascript执行
• 紫色（Rendering）:样式计算和布局，即重排
• 绿色（Painting）:重绘
• 灰色（Other）：其余事件花费的时间
• 白色（Idle）：空闲时间

细节模块有4个面板，Summary面板每一个事件都会有，其余三个只针对特定事件会有。

二、可能存在性能问题的区块

在Timeline中，浏览器会在检测过程当中发现的一些可能致使性能问题的过程进行标注， 在概况区域，可能会出现一些红色的区块段，这些红色的区块段代表，在对应的时间上执行的事件可能存在性能问题，而在火焰图模块，事件区块的右上角会出现红色的小三角，点击当前区块，在下面的"Summary"概要区域内会给出详细的警告内容以下图，浏览器提示“强制回流多是一个性能瓶颈”。

‘’

5、获取记录时抓取屏幕截图

 Timeline面板能够在页面加载时捕获屏幕截图，这个特色叫Filmstrip（幻灯片）。

 怎样获取？

 在记录前必定要选中“Screenshots”这个复选框，屏幕截图会保存在概述模块中。

记录完成后，把鼠标hover在截图上或者概述模块中，就能够看到一个缩放的屏幕截图，鼠标左右移动能够模拟一个渲染的动画。

 

6、javascript概况 

 在timeline获取js分析记录前必定要选中“JS Profile”这个复选框，记录结束后火焰图模块会展现出每一个被调用的JavaScript函数。

 

7、painting概况

要让timeline获取更多绘图信息，在记录前必定要选中“Paint”这个复选框 。选中后点击触发一个Paint事件，细节模块会多出一个"Paint Profile"面板来显示更多相关信息。

Rendering 设置

在More tools>Rendering setting中可用设置渲染的一些配置，在调试一些渲染问题时很是有用。打开后在Console控制台tab后多出一个Rendering的tab。

按Esc可用显示或隐藏Console/Rendering面板。默认隐藏。

8、查找记录

 若是只想关注某种类型的事件，好比只想查看HTML渲染。就能够查找记录。

Ctrl+F快捷键呼出搜索条，输入HTML便可。

9、放大Timeline的一部分

分析Timeline时，若是只对某一个时间段内的某些操做感兴趣，能够经过用鼠标拖动时间轴的始末滑块选择要浏览的区域，或者滚动鼠标放大和缩小选区，火焰图模块会自动跟着改变。

10、保存和加载recording 

 在概况模块或者火焰图模块，右键就能够看到两个选项：Save Timeline Data和Load Timeline Data。

保存后的数据格式是json格式。

 

 本文做者starof,因知识自己在变化，做者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5443445.html有问题欢迎与我讨论，共同进步。