Chrome开发者工具详解(3)-Timeline面板

忘是亡心i 2022-02-25 18:23 268阅读 0赞

**注：** *这一篇主要讲解面板Timeline，参考了Google的相关文档，主要用于公司内部技术分享。*。

## Timeline面板 ##

Timeline面板是整个面板里面最复杂的一个面板，涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息。  
你可以充分利用这个面板来分析你的网页的程序性能问题。

![timeline.png][]

### 概述 ###

下图是从Google官方网站中介绍Timeline面板的图贴到这里，该面板主要包括4大块窗格(Pane)：

1.  **Controls** 录制开关和控制录制过程中需要记录哪些信息。
2.  **Overview** 网页性能的概要信息。
3.  **Flame Chart** CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。
4.  **Details** 当选择一个指定的事件后，会显示这个事件的更多信息；当没有选择事件时，会显示指定的时间帧信息。

> **Flame Chart**里面的虚竖线含义：**蓝色**标记DOMContentLoaded事件；**绿色**标记第一次的绘制时间点；**红色**代表load事件。

![timeline-annotated.png][]

其中第2块**Overview**显示了网页性能相关的概要信息，可以通过鼠标或者区域边界上的灰色滑块来拖出一个指定区域范围，**Flame Chart**会跟着局部放大显示指定区域内的详情信息。

> 可以通过键盘上的`W`,`S`来放大和缩小指定区域，通过`A`,`D`来向左或向右移动指定区域。

从Google把图贴到这里，这个窗格包含了三个图表：

1.  **FPS** 每秒帧数(Frames Per Second)。绿色柱状条越高，则每秒帧数越高。在FPS图表上方的红色块是标记一个长帧。
2.  **CPU** 标记CPU资源的使用情况，这里的面积图标记着消耗CPU资源的各类事件。
3.  **NET** 各种颜色的柱状条分别显示一种资源。柱状条越长，代表获取这个资源的时间越长。

![timeline-overview.png][]

> **CPU**面积图中各颜色的含义：**蓝色**代表**HTML**文件；**黄色**代表**脚本**文件；**紫色**代表**样式**文件；**绿色**代表**媒体**文件；**灰色**代表其它**杂项**文件。

> **NET**图表柱状条两种颜色的含义：**较亮**的部分表示**等待时间**（当资源被请求时，直到第一个字节被下载的时间)；**较暗**的部分表示**传输时间**(在第一个和最后一个字节被下载之间的时间)。

### 网页录制详情 ###

支持两种网页录制操作：①录制*网页加载*，②录制*网页交互*。为了便于分析，录制的时间不宜太长、还要避免不必要的交互操作、并禁用浏览器的缓存和插件。

当录制完成后，在**Flame Chart**(火焰图)中点击左侧三角可以展开详情，点击其中的事件或者空白处，可以在**Details**里面查看该事件或者总的概要信息。这里面包含的信息量很大，限于篇幅原因，下次有机会再作深入介绍，或者直接到Google上查看[Timeline Event Reference][]这个参考文档。

### 录制中进行JS分析 ###

在录制之前点击**Controls**中的**JS Profile**复选框，可以在时间轴中捕获JavaScript的堆栈信息(会产生一定的性能消耗)，并且在**Flame Chart**(火焰图)中会显示所有被调用的JavaScript函数信息。

![timeline-jsprofile.png][]

### 录制中捕获截屏 ###

在录制之前点击**Controls**中的**Screenshots**复选框，可以在录制过程中捕获截屏，鼠标在**Overview**上从左向右移动则可以看到录制的动画。

![timeline-screenshots.png][]

### 绘制解析 ###

在录制之前点击**Controls**中的**Paint**复选框，可以获取绘制事件的更多细节信息（注意这会产生很多的性能消耗）。如果要深入了解网页渲染方面的信息，可以点击DevTools右上角的菜单，在**More tools**里面选中**Rendering settings**，这里面包含了如下设置项：

![moretools-rendering.png][]

*  **Paint Flashing** 高亮显示网页中需要被重绘的部分。
 *  **Layer Borders** 显示Layer边界。
 *  **FPS Meter** 每一秒的帧细节，帧速率的分布信息和GPU的内存使用情况。
 *  **Scrolling Performance Issues** 分析鼠标滚动时的性能问题，会显示使屏幕滚动变慢的区域。
 *  **Emulate CSS Media** 仿真CSS媒体类型，查看不同的设备上CSS样式效果，可能的媒体类型选项有`print`、`screen`。

把上面的所有设置项勾选上，网页的显示效果如下：

![timeline-rendering.png][]

### 查询指定事件 ###

你可以通过在DevTools上按`Cmd+F(Mac)`调出查询框，来查看指定时间区域范围内的指定类型的事件，点击`Cmd+G(Mac)`或者`Cmd+Shift+G(Mac)`可以按事件发生的顺序来查询。

![timeline-search.png][]

图中查询到了4个红色标记着的`Parse HTML`事件，点击`Cmd+G`焦点会在这4个事件移动。

### 运行时性能分析 ###

上面大致介绍了**Timeline**面板上的各个功能菜单，那么如何去利用该面板去分析和优化网页程序的运行性能呢，由于篇幅限制，就不在这边展开讨论，感兴趣的读者直接到Google开发者文档上查看，Google开发者文档有最权威最新的信息。

[timeline.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline.png
[timeline-annotated.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline-annotated.png
[timeline-overview.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline-overview.png
[Timeline Event Reference]: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/performance-reference
[timeline-jsprofile.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline-jsprofile.png
[timeline-screenshots.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline-screenshots.png
[moretools-rendering.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/moretools-rendering.png
[timeline-rendering.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline-rendering.png
[timeline-search.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline-search.png