Chrome Developer Tools：Timeline Panel说明

一、Timeline panel 概况

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

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

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

二、概述模块

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

1、FPS（Frames Per Second）

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

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

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

2、CPU

cpu资源。

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

3、NET

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

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

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

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

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

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

三、怎样获取一条记录

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

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

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

2、记录页面交互

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

所以记录页面交互步骤为，打开timeline面板，点击Record按钮，按钮在开始记录时变红色，此时执行页面交互，然后停止记录即可。

记录交互时注意：

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

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

四、查看记录详情

1、细节模块中记录详情

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

Summary中不同颜色代表不同内容。

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

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

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

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

‘’