尊重原文：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool
如何使用时间轴工具
使用Chrome DevTools 时间轴面板记录和分析应用程序运行时的所有活动。 这是开始调查应用程序中感知到的性能问题的最佳位置。
TL; DR
- 进行时间轴记录，以分析在页面加载或用户互动后发生的每个事件。
- 在“概览”窗格中查看FPS，CPU和网络请求。
- 单击火焰图表中的事件可查看其详细信息。
- 放大记录的某一部分，以便于分析。
时间轴面板概述
“时间轴”面板包含四个窗格：
- 控件 。 开始录制，停止录制，并配置在录制过程中捕获的信息。
- 概述 。 网页效果的高级摘要。 更多关于这一点下面。
- 火焰图 。 CPU堆栈跟踪的可视化。
你可能会看到一到三个点，垂直线在你的火焰图表上 。 蓝线代表DOMContentLoaded事件。 绿线表示第一次涂漆的时间。 红线表示load事件。
- 详细信息 。 选择事件时，此窗格显示有关该事件的更多信息。 当没有选择事件时，此窗格显示有关所选时间范围的信息。
概述窗格
“ 概述 ”窗格由三个图表组成：
- FPS 。 每秒帧数。 绿色条越高，FPS越高。 FPS图上方的红色块表示长帧，这可能是jank的候选。
- CPU 。 CPU资源。 此区域图表指示哪些类型的事件消耗CPU资源。
- NET 。 每个彩色条代表一个资源。 栏越长，检索资源所需的时间越长。 每个条的较亮部分表示等待时间（从请求资源到下载第一个字节的时间之间的时间）。 较暗的部分表示传送时间（从下载第一个和最后一个字节之间的时间）。
条带的颜色编码如下：
- HTML文件是蓝色的 。
- 脚本是黄色的 。
- 样式表为紫色 。
- 媒体文件为绿色 。
- 杂项资源是灰色的 。
进行录音
要对页面加载进行录制，请打开“ 时间轴”面板，打开要录制的页面，然后重新加载页面。 “ 时间轴”面板自动记录页面重新加载。
要录制页面交互 ，请打开“ 时间轴”面板，然后按录制按钮开始录制 
）或键入键盘快捷键Cmd + E （Mac）或Ctrl + E（Windows / Linux）。 录制期间录制按钮变为红色。 执行页面交互，然后按下录制按钮或再次键入键盘快捷键停止录制。
录制完成后，DevTools会猜测录制内容与您最相关的部分，并自动缩放到该部分。
录音提示
- 保持录音尽可能短 。 较短的录音通常使分析更容易。
- 避免不必要的操作 。 避免与您要记录和分析的活动无关的操作（鼠标点击，网络加载等）。 例如，如果要记录在单击“登录”按钮后发生的事件，请不要滚动页面，加载图像等。
- 禁用浏览器缓存 。 记录网络操作时，最好从DevTools设置面板或网络条件抽屉中禁用浏览器的缓存。
- 停用扩充功能 。 Chrome扩展程序可以向应用程序的时间轴记录添加不相关的噪音。 在无痕模式中开启Chrome视窗，或建立新的Chrome使用者设定档 ，确保您的环境没有扩充功能。
查看录制详情
在“ 火焰图表 ”中选择事件时，“ 详细信息 ”窗格将显示有关事件的其他信息。
某些标签（如“摘要” ）针对所有事件类型显示。 其他标签仅适用于特定事件类型。 有关每种记录类型的详细信息，请参阅时间轴事件参考 。
在录制期间捕获屏幕截图
“ 时间轴”面板可以在网页加载过程中捕获屏幕截图。 此功能称为Filmstrip 。
在进行录制以捕获录制的屏幕截图之前，请启用“ 控制 ”窗格中的“ 截屏”复选框。 屏幕截图显示在“ 概述 ”窗格下方。
将鼠标悬停在屏幕截图或概述窗格上，可以在记录中查看该点的缩放屏幕截图。 向左和向右移动鼠标以模拟录制的动画。
简介JavaScript
在拍摄记录以在时间轴记录中捕获JavaScript堆栈之前，请启用JS配置文件复选框。 当启用JS分析器时，您的火焰图显示所有调用的JavaScript函数。
个人资料绘画
启用绘画复选框之前，您采取录音获得更多的洞察绘画事件。 当启用绘图概要分析并单击“ 绘制”事件时，“ 详细信息 ”窗格中将显示一个新的“ 绘制概要分析器 ”选项卡，显示有关事件的更详细信息 。
渲染设置
打开主开发工具菜单，选择更多工具 > 渲染设置以访问渲染设置，这在调试涂料问题时可能会有所帮助。 渲染设置作为控制台抽屉旁边的选项卡打开（按esc可显示抽屉，如果它是隐藏的）。
搜索记录
在看事件时，你可能想关注一种类型的事件。 例如，您可能需要查看每个Parse HTML事件的详细信息。
在时间轴对焦时按Cmd + F （Mac）或Ctrl + F （Windows / Linux）以打开查找工具栏。 键入要检查的事件类型的名称，例如Event 。
工具栏仅应用于当前选定的时间范围。 在选定时间范围之外的任何事件不包括在结果中。
向上和向下箭头可按时间顺序移动结果。 因此，第一个结果表示所选时间帧中的最早事件，最后一个结果表示最后一个事件。 每次按向上或向下箭头时，都会选择一个新事件，因此您可以在“ 详细信息 ”窗格中查看其详细信息。 按向上和向下箭头等效于点击火焰图表中的事件。
放大时间轴部分
您可以放大记录的某一部分，以便于分析。 您可以使用“ 概述 ”窗格放大录制的一部分。 缩放后， 火焰图表会自动缩放以匹配相同的部分。
要放大时间轴部分：
- 在“ 概述 ”窗格中，使用鼠标拖出时间轴选择。
- 调整标尺区域中的灰色滑块。
选择某个部分后，可以使用W ， A ， S和D键调整选择。 W和S分别放大和缩小。 A和D分别向左和向右移动。
保存并加载录音
您可以通过在“ 概述”或“ 火焰图表”窗格内右键单击并选择相关选项来保存和打开记录。
