如何使用 Timeline 工具, chrome插件, 网站调试工具, Timeline时间线事件参考

 

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

如何使用 Timeline 工具, chrome插件, 网站调试工具
如何使用 Timeline 工具, chrome插件, 网站调试工具

 

TL;DR

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

 

Timeline 面板概览

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

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

 

Overview 窗格

Overview 窗格包含以下三个图表:

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

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

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

  • HTML 文件为蓝色
  • 脚本为黄色
  • 样式表为紫色
  • 媒体文件为绿色
  • 其他资源为灰色
如何使用 Timeline 工具, chrome插件, 网站调试工具
如何使用 Timeline 工具, chrome插件, 网站调试工具

 

做记录

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

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

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

 

记录提示

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

 

查看记录详细信息

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

如何使用 Timeline 工具, chrome插件, 网站调试工具
如何使用 Timeline 工具, chrome插件, 网站调试工具

一些标签(如 Summary)适用于所有事件类型。其他标签则仅对特定事件类型可用。 请参阅 Timeline 事件参考 (见下方),了解与每个记录类型相关的详细信息。

 

在记录期间捕捉屏幕截图

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

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

如何使用 Timeline 工具, chrome插件, 网站调试工具
如何使用 Timeline 工具, chrome插件, 网站调试工具

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

 

分析 JavaScript

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

如何使用 Timeline 工具, chrome插件, 网站调试工具
如何使用 Timeline 工具, chrome插件, 网站调试工具

 

分析绘制

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

如何使用 Timeline 工具, chrome插件, 网站调试工具
如何使用 Timeline 工具, chrome插件, 网站调试工具

 

渲染设置

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

如何使用 Timeline 工具, chrome插件, 网站调试工具
如何使用 Timeline 工具, chrome插件, 网站调试工具

 

搜索记录

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

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

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

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

如何使用 Timeline 工具, chrome插件, 网站调试工具
如何使用 Timeline 工具, chrome插件, 网站调试工具

 

在 Timeline 部分上放大

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

如何使用 Timeline 工具, chrome插件, 网站调试工具
如何使用 Timeline 工具, chrome插件, 网站调试工具

要在 Timeline 部分上放大,请执行以下操作:

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

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

 

保存和打开记录

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

如何使用 Timeline 工具, chrome插件, 网站调试工具
如何使用 Timeline 工具, chrome插件, 网站调试工具

 

时间线事件参考

时间线事件模式可以显示记录时触发的所有事件。使用时间线事件参考可以详细了解每一个时间线事件类型。

 

常见的时间线事件属性

某些详细信息存在于所有类型的事件中,而一些仅适用于特定的事件类型。本部分列出了不同事件类型的通用属性。特定于特定事件类型的属性列在这些事件类型遵循的参考中。

属性 显示时间
Aggregated time 对于带嵌套事件的事件,每个类别的事件所用的时间。
Call Stack 对于带子事件的事件,每个类别的事件所用的时间。
CPU time 记录的事件所花费的 CPU 时间。
Details 有关事件的其他详细信息。
Duration (at time-stamp) 事件及其所有子事件完成所需的时间,时间戳是事件发生的时间(相对于记录开始的时间)。
Self time 事件(不包括任何子事件)花费的时间。
Used Heap Size 记录事件时应用使用的内存大小,以及自上次采样以来已使用堆大小的增减 (+/-) 变化。

 

Loading 事件

本部分列出了属于加载类别的事件及其属性。

事件 说明
Parse HTML Chrome 执行其 HTML 解析算法。
Finish Loading 网络请求已完成。
Receive Data 请求的数据已被接收。存在一个或多个 Receive Data 事件。
Receive Response 请求的初始 HTTP 响应。
Send Request 网络请求已被发送。

 

Loading 事件属性

属性 说明
Resource 请求的资源的网址。
Preview 请求的资源的预览(仅图像)。
Request Method 用于请求的 HTTP 方法(例如,GET 或 POST)。
Status Code HTTP 响应代码。
MIME Type 请求的资源的 MIME 类型。
Encoded Data Length 请求的资源的长度(以字节为单位)。

 

Scripting 事件

本部分列出了属于脚本类别的事件及其属性。

事件 说明
Animation Frame Fired 预定的动画帧被触发,其回调处理程序被调用。
Cancel Animation Frame 预定的动画帧被取消。
GC Event 发生垃圾回收。
DOMContentLoaded 浏览器触发 DOMContentLoaded。当页面的所有 DOM 内容都已加载和解析时,将触发此事件。
Evaluate Script 脚本已被评估。
Event JavaScript 事件(例如,“mousedown”或“key”)。
Function Call 发生顶级 JavaScript 函数调用(只有浏览器进入 JavaScript 引擎时才会出现)。
Install Timer 已使用 setInterval() 或 setTimeout() 创建定时器。
Request Animation Frame requestAnimationFrame() 调用已预定一个新帧。
Remove Timer 之前创建的定时器已被清除。
Time 一个脚本调用了 console.time()
Time End 一个脚本调用了 console.timeEnd()
Timer Fired 使用 setInterval() 或 setTimeout() 创建的定时器已被触发。
XHR Ready State Change XMLHTTPRequest 的就绪状态已发生变化。
XHR Load XMLHTTPRequest 已结束加载。

 

Scripting 事件属性

属性 说明
Timer ID 定时器 ID。
Timeout 定时器指定的超时。
Repeats 指定定时器是否重复的布尔值。
Function Call 已调用一个函数。

 

Rendering 事件

本部分列出了属于渲染类别的事件及其属性。

事件 说明
Invalidate layout 页面布局被 DOM 更改声明为无效。
Layout 页面布局已被执行。
Recalculate style Chrome 重新计算了元素样式。
Scroll 嵌套视图的内容被滚动。

 

Rendering 事件属性

属性 说明
Layout invalidated 对于 Layout 记录,导致布局失效的代码的堆叠追踪。
Nodes that need layout 对于 Layout 记录,被标记为需要在重新布局启动前布局的节点的数量。正常情况下,这些代码是被开发者代码声明为无效的代码,以及向上追溯到重新布局根目录的路径。
Layout tree size 对于布局记录,重新布局根目录下节点(Chrome 启动重新布局的节点)的总数。
Layout scope 可能的值为“Partial”(重新布局边界是 DOM 的一部分)或“Whole document”。
Elements affected 对于 Recalculate 样式记录,受样式重新计算影响的元素的数量。
Styles invalidated 对于 Recalculate 样式记录,提供导致样式失效的代码的堆叠追踪。

 

Painting 事件

本部分列出了属于打印类别的事件及其属性。

事件 说明
Composite Layers Chrome 的渲染引擎合成了图像层。
Image Decode 一个图像资源被解码。
Image Resize 一个图像的大小相对于其原生尺寸发生了变化。
Paint 合成的图层被绘制到显示画面的一个区域。将鼠标悬停到 Paint 记录上会突出显示已被更新的显示画面区域。

 

Painting 事件属性

属性 说明
Location 对于 Paint 事件,绘制矩形的 x 和 y 坐标。
Dimensions 对于 Paint 事件,已绘制区域的高度和宽度。

 

 

本文: 如何使用 Timeline 工具, chrome插件, 网站调试工具, Timeline时间线事件参考

One Comment

Leave a Reply