如何使用Chrome Timeline工具
如何使用Chrome Timeline工具
Chrome DevTools的Timeline面板是分析Web应用性能问题的重要工具。通过Timeline面板，开发者可以记录和分析应用在运行时的所有活动，包括页面加载、用户交互等。本文将详细介绍如何使用Timeline面板，帮助开发者快速定位和解决性能瓶颈。
使用Chrome DevTools的Timeline面板可以记录和分析您的应用在运行时的所有活动。这里是开始调查应用中可觉察性能问题的最佳位置。
TL;DR
- 执行Timeline记录，分析页面加载或用户交互后发生的每个事件。
- 在Overview窗格中查看FPS、CPU和网络请求。
- 点击火焰图中的事件以查看与其相关的详细信息。
- 放大显示一部分记录以简化分析。
Timeline面板概览
Timeline面板包含以下四个窗格：
- Controls。开始记录，停止记录和配置记录期间捕获的信息。
- Overview。页面性能的高级汇总。更多内容请参见下文。
- 火焰图。CPU堆叠追踪的可视化。您可以在火焰图上看到一到三条垂直的虚线。蓝线代表DOMContentLoaded事件。绿线代表首次绘制的时间。红线代表load事件。
- Details。选择事件后，此窗格会显示与该事件有关的更多信息。未选择事件时，此窗格会显示选定时间范围的相关信息。
Overview窗格
Overview窗格包含以下三个图表：
- FPS。每秒帧数。绿色竖线越高，FPS越高。FPS图表上的红色块表示长时间帧，很可能会出现卡顿。
- CPU。CPU资源。此面积图指示消耗CPU资源的事件类型。
- NET。每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）。深色部分表示传输时间（下载第一个和最后一个字节之间的时间）。横杠按照以下方式进行彩色编码：
- HTML文件为蓝色。
- 脚本为黄色。
- 样式表为紫色。
- 媒体文件为绿色。
- 其他资源为灰色。
做记录
要记录页面加载，请打开Timeline面板，打开想要记录的页面，然后重新加载页面。Timeline面板会自动记录页面重新加载。
要记录页面交互，请打开Timeline面板，然后按Record按钮或者键入键盘快捷键Cmd+E (Mac)或Ctrl+E(Windows/Linux)，开始记录。记录时，Record按钮会变成红色。执行页面交互，然后按Record按钮或再次键入键盘快捷键停止记录。
完成记录后，DevTools会猜测哪一部分记录与您最相关，并自动缩放到那一个部分。
记录提示
- 尽可能保持记录简短。简短的记录通常会让分析更容易。
- 避免不必要的操作。避免与您想要记录和分析的活动无关联的操作（鼠标点击、网络加载，等等）。例如，如果您想要记录点击Login按钮后发生的事件，请不要滚动页面、加载图像，等等。
- 停用浏览器缓存。记录网络操作时，最好从DevTools的Settings面板或Network conditions抽屉式导航栏停用浏览器的缓存。
- 停用扩展程序。Chrome扩展程序会给应用的Timeline记录增加不相关的噪声。以隐身模式打开Chrome窗口或者创建新的Chrome用户个人资料，确保您的环境中没有扩展程序。
查看记录详细信息
在火焰图中选择事件时，Details窗格会显示与事件相关的其他信息。一些标签（如Summary）适用于所有事件类型。其他标签则仅对特定事件类型可用。请参阅Timeline事件参考，了解与每个记录类型相关的详细信息。
在记录期间捕捉屏幕截图
Timeline面板可以在页面加载时捕捉屏幕截图。此功能称为幻灯片。在您开始记录之前，请在Controls窗格中启用Screenshots复选框，以便捕捉记录的屏幕截图。屏幕截图显示在Overview窗格下方。将您的鼠标悬停在Screenshots或Overview窗格上可以查看记录中该点的缩放屏幕截图。左右移动鼠标可以模拟记录的动画。
分析JavaScript
开始记录前，请启用JS Profile复选框，以便在您的时间线记录中捕捉JavaScript堆栈。启用JS分析器后，您的火焰图会显示调用的每个JavaScript函数。
分析绘制
开始记录前，请启用Paint复选框，以便获取有关Paint事件的更多数据分析。启用绘制分析并点击Paint事件后，新Paint Profiler标签会出现在Details窗格中，后者显示了许多与事件相关的更精细信息。
渲染设置
打开主DevTools菜单，然后选择More tools > Rendering settings访问渲染设置，这些设置在调试绘制问题时非常有用。渲染设置会作为一个标签显示在Console抽屉式导航栏（如果隐藏，请按esc显示抽屉式导航栏）旁边。
搜索记录
查看事件时，您可能希望侧重于一种类型的事件。例如，您可能需要查看每个Parse HTML事件的详细信息。在Timeline处于焦点时，按Cmd+F (Mac)或Ctrl+F (Windows/Linux)以打开一个查找工具栏。键入您想要检查的事件类型的名称，如Event。工具栏仅适用于当前选定的时间范围。选定时间范围以外的任何事件都不会包含在结果中。利用上下箭头，您可以按照时间顺序在结果中移动。所以，第一个结果表示选定时间范围内最早的事件，最后一个结果表示最后的事件。每次按向上或向下箭头会选择一个新事件，因此，您可以在Details窗格中查看其详细信息。按向上和向下箭头等同于在火焰图中点击事件。
在Timeline部分上放大
您可以放大显示一部分记录，以便简化分析。使用Overview窗格可以放大显示一部分记录。放大后，火焰图会自动缩放以匹配同一部分。
要在Timeline部分上放大，请执行以下操作：
- 在Overview窗格中，使用鼠标拖出Timeline选择。
- 在标尺区域调整灰色滑块。选择部分后，可以使用W、A、S和D键调整您的选择。W和S分别代表放大和缩小。A和D分别代表左移和右移。
保存和打开记录
您可以在Overview或火焰图窗格中点击右键并选择相关选项，保存和打开记录。