网上中文的资料版本比较老，找到一个新版本的英文介绍，翻一下，原文：https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool?hl=zh
TimeLine 面板总览
4部分组成：
1.控制面板
包含开始记录，结束记录，配置我要捕获什么内容组成
2.概述面板
页面性能的高度总结，详见下文。
3.火焰图面板
Cpu栈的可视化描述
4.细节面板
当一个事件被选中，这个面板会显示有关这个事件的更多信息。如果没有事件选中，会显示选中的火焰图的信息。
概述面板
该面板有3部分图组成：
1.FPS
每秒的火焰。绿色的柱状越高，fps越高。fps上红色的区块预示着长火焰，有可能是卡顿产生了。（动画渲染时间超过了屏幕的刷新时间）
2.cpu
cpu资源。这个面积图指示了哪种事件消耗CPU资源多。
3.net
每个彩色柱代表一种资源。柱子越高，获取它的时间越长。每个柱较淡颜色的部分代表了它的等待时间（发送请求到第一个比特下载下来的时间）。深色的部分代表它的处理时间（第一个比特接收
到最后一个比特接收的时间）
柱子的颜色对应如下：
html文件是蓝色。
script问件事黄色。
Stylesheets文件是紫色。
media文件是绿色。
其他文件是灰色。
做一个记录
记录一个页面的载入过程，我们需要打开Timeline面板，打开我们需要记录的网页，刷新网页，就会自动开始记录(经测试不可以，得在timeline面板按F5)
如果要记录页面交互，按(
) 或Ctrl+e开始记录，页面操作，然后按红色按钮结束记录。
当记录结束，工具组会自动缩放到和你最相关的部分给你查看。
记录小贴士
让纪录的时间越短越好：短时间让你更容易分析。
避免不必要的动作
禁用浏览器缓存
禁用拓展插件
查看记录细节
当你选中火焰表的一个事件，细节面板会显示更多有关的细节。
一些选项卡，比如Summary，是所有类型的事件。而其他的选项卡只显示某一种事件，查看Timeline event reference获得更多的记录类型。
纪录同时捕获截图
TimeLine面板可以在载入页面的时候捕获截图。这就是传说中的幻灯片（连续截图）
使用方法就是在控制面板选中Screenshots ，然后在概述面板中鼠标放上去就能看了
JavaScript切图
在控制面板中选中JS Profile选项框，这样你就可以在火焰图中看到每个Js函数的调用情况。
painting切图
当在控制面板中选中Paint，记录后你可以单击一个Paint事件，然后你可以在细节面板中查看。
渲染配置
打开工具主菜单，选择 More tools > Rendering settings打开配置面板，这个会对于调试paint相关的有帮助。具体如下：
搜索记录
输入Ctrl+F (Windows / Linux) 打开，输入事件名称查询，比如 Event