如何使用Chrome Timeline 工具（译）

【原文地址】https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool
该文章介绍了 Timeline 工具的基本组成以及如何使用该工具对页面事件进行记录，具体的调试细节还得更具读者的具体使用场景和调试目的对数据进行分析得到解决方案，该文章算是对 Chrome Timeline 工具的一个使用说明书。

使用 Chrome DevTools 的 Timeline 面板记录程序运行时的所有行为，并用于加以分析是解决程序性能问题的最好方案。

timeline-panel

目录结构

Timeline面板概括（Timeline panel overview）
开始一次记录（Make a recording）
查看记录详细信息（View recording details）
在记录期间获取页面截图信息（Capture screenshots during recording）
分析 JavaScript（Profile JavaScript）
分析 painting（Profile painting）
在记录中查找（Search records）
Zoom in on a Timeline section
保持和载入记录（Save and load recordings）

通过 Timeline 记录页面加载后所发生的各种事件和交互。
在 Overview 区域查看 FPS，CPU 和网络请求信息
点击 Flame Chart 上的一个事件记录查看其详细信息
放大某一段记录，更利于分析

Timeline panel overview

Timeline 面板由一下 4 个子面板构成：

控制面板（Controls）
开启记录，停止记录，配置记录期间需要记录那些内容。
概括（Overview）
对页面表现（行为）的一个概述。
Flame Chart
可视化 CPU 堆栈(stack)信息记录
在 Flame Chart 面板上你可能看到三根垂直的线，蓝线代表 DOMContentLoaded 事件，绿线代表渲染开始的时间( time to first paint)，红线代表 load 事件。
详细信息（Detail）
当有具体事件被选择时，该面板展示这个事件的更多详细信息。如果没有事件被选择，该面板展示当前所选时间段的一些信息。

timeline-annotated

Overview pane

概括区域由一下三个图形记录组成:

FPS. Frames Per Second.
绿色的柱越高， FPS 值也越高。FPS 图表上方的红色小块指明了长帧(long frame，较慢渲染？)，这些 long frame 可能是卡顿(jank)
CPU. CPU Resources.
这个面积图(area chart)表明了哪种事件在消耗 CPU 资源。
NET.
每种不同颜色的条代表一种资源。这个条越长表明获取( retrieve )该资源所花的时间越长。

每个条中的浅色部分代表等待时间（资源请求被发送到收到第一个响应字节的时间），深色部分代表文件传输时间（从收到第一个字节到这个资源完全被下载好）

蓝色代表 HTML 文件，黄色代表 Script 文件，紫色代表 Stylesheets 文件，绿色代表 Media 文件，灰色代表其他资源。

overview-annotated

Make a recording

记录一个页面的loading过程
打开 Timeline 面板，在当前 Tab 打开你想要记录的页面，然后刷新该页面，Timeline 面板会自动的记录一个页面的 reload。
记录页面上的交互
打开 Timeline 面板，点击该面板左上的 Record 按钮( ● ) 或者通过快捷键(Cmd + E/Ctrl + E) 开始记录。
当 Timeline 正在记录页面事件时，Record 按钮会变成红色的。
在记录期间进行一些想要分析的页面交互，当再次发送 Record 命令（●按钮，或键盘快捷方式）时会停止这次记录。

当记录停止过后，DevTools 会自动去分析那块内容是你最关心的，并且会自动的放大（选择）那块区域。

Recording Tips：

Keep recordings as short as possible.
保持记录内容尽可能的少，通常越短的记录越利于分析。
Avoid unnecessary actions.
避免一些你并不关心的无用的事件（比如：鼠标点击，网络加载）。比如，你希望分析的是点击 Login button 后的处理事件，就不要去滚动当前页面，加载更多的图片，或其他一些无关事件。
Disable the browser cache.
当记录分析一些网络相关事件时，禁用浏览器的缓存是个不错的主意。你可以在 DevTools Settings 面板或者 Network conditions 面板禁用缓存。
Disable extensions.
Chrome 浏览器扩展会在记录中添加一些不相关的 noise 到 Timeline 记录中。可以通过打开隐身模式或者创建一个新的浏览器用户来确保你的Chrome环境下没有扩展插件。

View recording details

当你在 Flame Chart 中选择一个具体的事件，Detail 区域会展示一些关于该事件的额外信息。

details-pane

上图中的一些 tab，比如 __Summay __ 对所有的事件都会有对应的展示信息，其他的一些 tab 只有对于某些特定的事件类型才有展示内容。可以通过查看 Timeline event reference 查看 tab 和事件类型的关系。

Capture screenshots during recording

TImeline 面板还可以在记录期间对页面进行截屏重现，这个特性就像幻灯片查看一样。

如果要对一个页面的进行截屏重现，现在控制区域(Controls pane) 中勾选 Screenshots，然后开始记录，完成记录后，页面的截屏会展现在概述面板(Overview pane)下方。

timeline-filmstrip.png

将鼠标移动到 概述区域 或截屏上可以查看到当前点上页面截屏放大的图像，左右移动鼠标来模拟记录期间页面的动态效果。

Profile JavaScript

在开始记录之前，在控制区域(Control pane)勾选 JS Profile，这样记录的时候就会去记录 JavaScript stacks 相关信息。这时你的 Flame Chart 中将会记录任何一个被调用过的方法。

js-profile

Profile painting

和 Profile Javascript 一样，你需要先在控制区域勾选 Paint 来在后面的记录中记录 Paint 事件，此时，当你在记录结果中选择一个 Paint 事件后，Paint Priflter 这个 tab 将会出现在 Details 区域，该 tab 将会展示更多当前关于当前事件的信息。

paint-profiler

Rendering settings

打开 DevTools 的主菜单，选择 More tools > Rendering settings来配置一些 rendering settings，这些可能会对调试渲染问题很有帮助。开启 rendering settings 后，会在 Console drawer 旁边添加一个 Rendering tab。如果 Console drawer 没有展现在页面上，可通过 ESC 使其展示出来。

rendering-settings

Search records

查看记录的事件时，你可能只希望关注于某一类型的事件，比如你只是希望查看每个 Parse HTML 事件的详细信息。

通过使用 Cmd + F/Ctrl + F快捷键，在 Timeline 区域中打开搜索工具栏，在搜索工具栏中输入你想分析的事件类型，比如 Event.

工具栏只会将搜索条件作用在当前选择的时间表内的事件，在时间表外的事件都不会显示在结果中。

搜索工具栏中的上下箭头可以帮助你按事件发生的先后顺序查看过滤后的事件的详细信息。第一条记录代表当前选区最先发生的事件，最后一条记录代表当前选区最后发生的事件。每次点击上下箭头，就会选择一个新的事件，所以你可以在 Details 面板查看这个事件的具体信息。（点击上下箭头和在 Flame Chart 选择一个事件是等效的）

find-toolbar

Zoom in on a Timeline section

指定某一个 Recording 结果区域，将会更有利于对记录数据的分析。可以通过在 Overview 区域选择某一块内容，来定位到某一块 recording 数据。当在 Overview 区域选择某一块内容后，Flame Chart 会自动定位到匹配的区域，并更清楚的展示对应内容。

zoom

可以通过下面的方式来指定选择一块区域：

在 Overview 面板，通过鼠标拖选出关注的内容
通过调整 ruler 区域的灰色滑块来选出关注的内容

一旦你选择了某一块内容，你可以使用 W, A, S, D 键来调整选区，W 和 S 用来放大放小选取，A 和 D 分别向左向右移动选区。（测试中没发现具体怎么使用，通过手动选区来实现这些功能）

Save and load recordings

你可以通过在 概述面板 或 Flame Chart 区域点击鼠标左键，在弹出的菜单中选择相关选项，实现Save 和 Load recordings。

save-open