如何使用 chrome Timeline 工具

╰半橙微兮° 2023-10-07 00:26 2阅读 0赞

使用 Chrome DevTools 的 *Timeline* 面板可以记录和分析您的应用在运行时的所有活动。 这里是开始调查应用中可觉察性能问题的最佳位置。

![a0f7b1308fce23c743fa08e449ef386f.png][]

#### TL;DR ####

*  执行 Timeline 记录，分析页面加载或用户交互后发生的每个事件。
 *  在 Overview 窗格中查看 FPS、CPU 和网络请求。
 *  点击火焰图中的事件以查看与其相关的详细信息。
 *  放大显示一部分记录以简化分析。

### Timeline 面板概览 ###

Timeline 面板包含以下四个窗格：

1.  **Controls**。开始记录，停止记录和配置记录期间捕获的信息。
2.  **Overview**。 页面性能的高级汇总。更多内容请参见下文。
3.  **火焰图**。 CPU 堆叠追踪的可视化。
    
    您可以在**火焰图**上看到一到三条垂直的虚线。蓝线代表 `DOMContentLoaded` 事件。 绿线代表首次绘制的时间。 红线代表 `load` 事件。
4.  **Details**。选择事件后，此窗格会显示与该事件有关的更多信息。 未选择事件时，此窗格会显示选定时间范围的相关信息。

![97816e5365489e6eefc18210e158f956.png][]

#### Overview 窗格 ####

**Overview** 窗格包含以下三个图表：

1.  **FPS**。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现[卡顿][Link 1]。
2.  **CPU**。 CPU 资源。此[面积图][Link 2]指示消耗 CPU 资源的事件类型。
3.  **NET**。每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）。

深色部分表示传输时间（下载第一个和最后一个字节之间的时间）。

横杠按照以下方式进行彩色编码：

*  HTML 文件为**蓝色**。
 *  脚本为**黄色**。
 *  样式表为**紫色**。
 *  媒体文件为**绿色**。
 *  其他资源为**灰色**。

![6aa7b90d8f61d59e653d7f41759e25dd.png][]

### 做记录 ###

要记录*页面加载*，请打开 **Timeline** 面板，打开想要记录的页面，然后重新加载页面。 **Timeline** 面板会自动记录页面重新加载。

要记录*页面交互*，请打开 **Timeline** 面板，然后按 **Record** 按钮 或者键入键盘快捷键 Cmd+E (Mac) 或 Ctrl+E(Windows / Linux)，开始记录。记录时，**Record** 按钮会变成红色。执行页面交互，然后按 **Record** 按钮或再次键入键盘快捷键停止记录。

完成记录后，DevTools 会猜测哪一部分记录与您最相关，并自动缩放到那一个部分。

#### 记录提示 ####

*  **尽可能保持记录简短**。简短的记录通常会让分析更容易。
 *  **避免不必要的操作**。避免与您想要记录和分析的活动无关联的操作（鼠标点击、网络加载，等等）。例如，如果您想要记录点击 Login 按钮后发生的事件，请不要滚动页面、加载图像，等等。
 *  **停用浏览器缓存**。记录网络操作时，最好从 DevTools 的 Settings 面板或 [Network conditions][] 抽屉式导航栏停用浏览器的缓存。
 *  **停用扩展程序**。Chrome 扩展程序会给应用的 Timeline 记录增加不相关的噪声。 以[隐身模式][Link 3]打开 Chrome 窗口或者创建新的 [Chrome 用户个人资料][Chrome]，确保您的环境中没有扩展程序。

### 查看记录详细信息 ###

在**火焰图**中选择事件时，**Details** 窗格会显示与事件相关的其他信息。

![9f20d7da955a8410f6c946c3bcd30722.png][]

一些标签（如 **Summary**）适用于所有事件类型。其他标签则仅对特定事件类型可用。 请参阅 [Timeline 事件参考][Timeline]，了解与每个记录类型相关的详细信息。

### 在记录期间捕捉屏幕截图 ###

**Timeline** 面板可以在页面加载时捕捉屏幕截图。此功能称为**幻灯片**。

在您开始记录之前，请在 **Controls** 窗格中启用 **Screenshots** 复选框，以便捕捉记录的屏幕截图。 屏幕截图显示在 **Overview** 窗格下方。

![9ac50b0d384aaad14492614772c97da4.png][]

将您的鼠标悬停在 **Screenshots** 或 **Overview** 窗格上可以查看记录中该点的缩放屏幕截图。 左右移动鼠标可以模拟记录的动画。

### 分析 JavaScript ###

开始记录前，请启用 **JS Profile** 复选框，以便在您的时间线记录中捕捉 JavaScript 堆栈。 启用 JS 分析器后，您的火焰图会显示调用的每个 JavaScript 函数。

![cd1f6b87800023ca0137ad64594e660d.png][]

### 分析绘制 ###

开始记录前，请启用 **Paint** 复选框，以便获取有关 **Paint** 事件的更多数据分析。 启用绘制分析并点击 **Paint** 事件后，新 **Paint Profiler** 标签会出现在 **Details** 窗格中，后者显示了许多与事件相关的更精细信息。

![ca16ba554e710b42af36fc19719c204d.png][]

#### 渲染设置 ####

打开主 DevTools 菜单，然后选择**More tools** > **Rendering settings** 访问渲染设置，这些设置在调试绘制问题时非常有用。渲染设置会作为一个标签显示在 **Console** 抽屉式导航栏（如果隐藏，请按 esc 显示抽屉式导航栏）旁边。

![028dbcefc88e7307528d8feb064d777d.png][]

### 搜索记录 ###

查看事件时，您可能希望侧重于一种类型的事件。例如，您可能需要查看每个 `Parse HTML` 事件的详细信息。

在 **Timeline** 处于焦点时，按 Cmd+F (Mac) 或 Ctrl+F (Windows / Linux) 以打开一个查找工具栏。键入您想要检查的事件类型的名称，如 `Event`。

工具栏仅适用于当前选定的时间范围。选定时间范围以外的任何事件都不会包含在结果中。

利用上下箭头，您可以按照时间顺序在结果中移动。所以，第一个结果表示选定时间范围内最早的事件，最后一个结果表示最后的事件。每次按向上或向下箭头会选择一个新事件，因此，您可以在 **Details** 窗格中查看其详细信息。按向上和向下箭头等同于在**火焰图**中点击事件。

![9b1856eeab9b3bb711d84d880d255f19.png][]

### 在 Timeline 部分上放大 ###

您可以放大显示一部分记录，以便简化分析。使用 **Overview** 窗格可以放大显示一部分记录。 放大后，**火焰图**会自动缩放以匹配同一部分。

![1ffcea9cdb6f918c340ecf7c3c4e0620.png][]

要在 Timeline 部分上放大，请执行以下操作：

*  在 **Overview** 窗格中，使用鼠标拖出 Timeline 选择。
 *  在标尺区域调整灰色滑块。

选择部分后，可以使用 W、A、S 和 D 键调整您的选择。 W 和 S 分别代表放大和缩小。 A 和 D 分别代表左移和右移。

### 保存和打开记录 ###

您可以在 **Overview** 或**火焰图**窗格中点击右键并选择相关选项，保存和打开记录。

![a68e5088b41ed9487965ee4064595b1c.png][]

[a0f7b1308fce23c743fa08e449ef386f.png]: https://img-blog.csdnimg.cn/img_convert/a0f7b1308fce23c743fa08e449ef386f.png
[97816e5365489e6eefc18210e158f956.png]: https://img-blog.csdnimg.cn/img_convert/97816e5365489e6eefc18210e158f956.png
[Link 1]: https://developers.google.com/web/fundamentals/performance/rendering/
[Link 2]: https://en.wikipedia.org/wiki/Area_chart
[6aa7b90d8f61d59e653d7f41759e25dd.png]: https://img-blog.csdnimg.cn/img_convert/6aa7b90d8f61d59e653d7f41759e25dd.png
[Network conditions]: https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/network-conditions#network-conditions
[Link 3]: https://support.google.com/chrome/answer/95464
[Chrome]: https://support.google.com/chrome/answer/142059
[9f20d7da955a8410f6c946c3bcd30722.png]: https://img-blog.csdnimg.cn/img_convert/9f20d7da955a8410f6c946c3bcd30722.png
[Timeline]: https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/performance-reference
[9ac50b0d384aaad14492614772c97da4.png]: https://img-blog.csdnimg.cn/img_convert/9ac50b0d384aaad14492614772c97da4.png
[cd1f6b87800023ca0137ad64594e660d.png]: https://img-blog.csdnimg.cn/img_convert/cd1f6b87800023ca0137ad64594e660d.png
[ca16ba554e710b42af36fc19719c204d.png]: https://img-blog.csdnimg.cn/img_convert/ca16ba554e710b42af36fc19719c204d.png
[028dbcefc88e7307528d8feb064d777d.png]: https://img-blog.csdnimg.cn/img_convert/028dbcefc88e7307528d8feb064d777d.png
[9b1856eeab9b3bb711d84d880d255f19.png]: https://img-blog.csdnimg.cn/img_convert/9b1856eeab9b3bb711d84d880d255f19.png
[1ffcea9cdb6f918c340ecf7c3c4e0620.png]: https://img-blog.csdnimg.cn/img_convert/1ffcea9cdb6f918c340ecf7c3c4e0620.png
[a68e5088b41ed9487965ee4064595b1c.png]: https://img-blog.csdnimg.cn/img_convert/a68e5088b41ed9487965ee4064595b1c.png