如何使用Timeline Tool

调查性能问题最好的切入点：使用Chrome开发者工具Timeline 面板来录制和分析应用运行时的所有活动。

Timeline 面板概述

Timeline 面板由以下几个部分组成：(对比图示）

• Controls . 开始录制、结束录制，以及配置录制时需要被捕获的信息。
• Overview. 高层次的页面性能总结。
• Flame Chart(火焰图). CPU堆栈跟踪的可视化 .你可能会在火焰图里看见一到三条垂直的虚线。蓝色的线表示DOMContentLoaded事件，绿色的表示最早绘制的时间，红色的表示load事件。
• Details. 当选定某个事件，这个面板里显示的是这个事件的更详细的信息，如果么有选定某个事件，这个面板里显示的是选中的时间火焰的信息。

Paste_Image.png

Overview 面板

overview 面板由3个图表组成

• FPS. Frames Per Seconnd.(每秒帧数）。绿色条状越高，则FPS越高。FPS条上面的红色块状代表长帧.
• CPU资源. 这个区域的图表表明了正在消耗CPU资源的事件类型。
• NET. 每一个有颜色的条状代表着一种资源。条状长度越长，就表示它获取资源的时间约长。条状较亮的部分代表了等待时间（资源开始请求和第一个字节下载之间的时间），暗的部分代表了传输时间（第一个字节和最后一个字节下载完成之间的时间）

条状和颜色的代表关系如下

• HTML文件：蓝色

• Script：橙色

• Stylesheets:紫色

• Media 文件：绿色

• 其他：灰色

  Paste_Image.png

录制

• 要录制一个页面的加载过程，打开timeline面板，打开要录制的页面，然后重新加载页面，Timeline面板则自动录制页面的重载。

• 要录制一个页面的交互，打开timeline,然后点击录制按钮，或者是使用快捷键Cmd+E(mac) 或者Ctrl+E(windows/Linux).录制期间，录制按钮会是红色的。进行页面交互操作，再次电脑机录制按钮或者使用快捷键来结束录制。

• 当录制结束后，开发者工具会猜测录制的哪一个部分和你是最有关的，并自动将那部分呈现在焦点上。

录制建议

• 尽量缩短录制时间 ：短小的录制通常能更容易进行分析。

• 避免不必要的动作： 避免一些和你想要录制分析的活动无关的操作(鼠标点击、网络加载等).例如，你想要录制一个发生在你点击了登录按钮后的事件，那么就不要滚动页面、加载图片等等。

• 使浏览器缓存无效：如果要录制网络相关操作，最好将浏览器的缓存设置为不可用。 可以在开发者工具的Setting面板或者Network conditions drawer处进行设置。

• 使插件不可用：chrome插件会给Timeline录制增加一些不相关的干扰。可以在隐身模式下打开chrome窗口，或者创建一个新的chrome用户，保证环境没有插件。

  Paste_Image.png Paste_Image.png

查看录制明细

如果你在火焰图表上选择了一个事件，则Details面板会显示出这个事件的其他详细信息。如图，Summary可以显示所有的事件类型，其他tab只对一些特定的事件有用。

Paste_Image.png

录制期间捕获屏幕截图

• Timeline面板可以在页面加载期间捕获屏幕截图。即所谓的幻灯片功能。

• 录制之前，在Controls面板中勾选Screenshots,幻灯片会在overview面板下面呈现。

• 将鼠标hover在screenshots或者overview面板上可以看到录制时间点的幻灯片。从左到右边移动鼠标可以模拟录制的动画过程。

Paste_Image.png

Javascript Profile

想要通过录制来捕获JavaScript堆之前，要勾选JS Profile.一旦JS Profile功能可用，火焰图上将显示每一个被调用的javascript方法。

Paste_Image.png

Profile painting

想要通过录制来查看更多的绘制事件，要先勾选Paint.
一旦paint profiling 可用，点击Paint事件，一个新的Paint Profiler tab会显示在Details面板 ，面板上会显示出更多关于事件的信息。

Paste_Image.png

Rendering setting

打开开发者工具的主菜单，选择more tools>Rendering settings 进入渲染设置，这对绘制相关的问题很有帮助。rendering setting会在console后面打开一个tab。

Paste_Image.png

查找录制

有时候你只想关注一种类型的事件。例如，你可能需要查看每一个parse HTML的事件

• 在timeline界面上按Cmd+F(mac)或者Ctrl+F(win/linux)打开一个搜索工具条。输入你想要观察的事件类型，比如Event.

• 工具条的搜索范围仅限于当前选定的时间范围内，任何选定时间范围外的事件不会被包含在搜索结果里。

• 工具条上的上下箭头允许你按事件顺序移动结果。则，第一条记录表示选定的时间范围内最早发生的事件，最后的记录表示最后的事件。每一次你点击上下箭头，一个新的事件就会被选中，所以你可以在Details面板中看到它的明细。在火焰图中，按住上下箭头的作用和点击事件是一样的。

Paste_Image.png

在timeline section 里移动

为了让分析变得更容易，你可以通过拖动选择录制的一个片段来分析。在overview面板里拖动选择一个片段，火焰图会自动显示出对应这个片段的信息。
一旦选择一个片段，你可以使用W,A,S,D键来调整选择结果

Paste_Image.png

保存和下载录制

你可以通过在overview或者flame chart面板右键点击来保存或者打开录制

Paste_Image.png

原文链接：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool