如何使用Chrome Timeline 工具（译）

时间 2019-12-09

原文原文链接

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

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

目录结构

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 上的一个事件记录查看其详细信息
放大某一段记录，更利于分析web

Timeline panel overview

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

控制面板（Controls）
开启记录，中止记录，配置记录期间须要记录那些内容。浏览器
归纳（Overview）
对页面表现（行为）的一个概述。缓存
Flame Chart
可视化 CPU 堆栈(stack)信息记录
在 Flame Chart 面板上你可能看到三根垂直的线，蓝线表明 DOMContentLoaded 事件，绿线表明渲染开始的时间( time to first paint)，红线表明 load 事件。网络
详细信息（Detail）
当有具体事件被选择时，该面板展现这个事件的更多详细信息。若是没有事件被选择，该面板展现当前所选时间段的一些信息。chrome-devtools

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 文件，灰色表明其余资源。

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 区域会展现一些关于该事件的额外信息。

上图中的一些 tab，好比 Summay 对全部的事件都会有对应的展现信息，其余的一些 tab 只有对于某些特定的事件类型才有展现内容。能够经过查看 Timeline event reference 查看 tab 和事件类型的关系。

Capture screenshots during recording

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

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

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

Profile JavaScript

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

Profile painting

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

Rendering settings

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

Search records

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

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

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

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

Zoom in on a Timeline section

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

能够经过下面的方式来指定选择一块区域：

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

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

Save and load recordings

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

转自：http://codecloud.net/18559.html