Chrome Developer Tools 之 Timeline 面板

Question

一、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"概要区域内会给出详细的警告内容如下图，浏览器提示“强制回流可能是一个性能瓶颈”。

‘’

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

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

怎样获取？

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

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

六、JavaScript 概况

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

七、Painting 概况

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

Rendering 设置

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

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

八、查找记录

如果只想关注某种类型的事件，比如只想查看 HTML 渲染。就可以查找记录。Ctrl+F 快捷键呼出搜索条，输入 HTML 即可。

九、放大 Timeline 的一部分

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

十、保存和加载 recording

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

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