一、概括
Timeline面板包括以下四个部分：
- 控制面板。开始记录、停止记录、配置捕获信息；
- 概况。页面性能的整体概况；
- flame chart。直观展示cpu堆的情况。你能够看到三条虚线，蓝色的代表DOM生成完毕，绿色的代表第一次绘制，红色代表加载完毕；
- 细节。当一个事件被选中，这块区域显示事件的更全面信息。当没有事件被选中，展示关于选中的事件帧的信息。
二、概况面板
概况面板包含三个图：
- FPS。每秒的帧数量。绿色块越高，FPS越高。在绿色块上面的红色块表明每帧的事件过长，可能出现卡顿；
- CPU。每种事件的CPU占用。
- NET。每个颜色的块代表一种资源，块长度越长，获取此资源的时间也越长。较浅的区域表示等待时间（从发送请求到接收到第一个byte的时间）。深色区域代表传输事件。HTML 文件是蓝色的，Scripts是黄色的， * 样式表是紫色的，媒体文件是绿色的，混杂资源是灰色。
三、记录
记录一个页面加载，打开Timeline面板，打开你想记录的页面，然后刷新页面，timeline面板将自动记录页面重载。
记录页面交互，打开Timeline面板，点击RECORD按钮，RECORD按钮在记录时变成红色，执行页面交互，然后停止记录。
当记录完成后，DevTools会自动猜测哪部分与你相关，自动放大此本分。
记录小贴士：
- 记录时间越短越好
- 避免不必要操作
- 禁止浏览器缓存
- 禁止插件扩展
四、记录细节
当你在flame chart中选择了一个事件，细节面板会显示该事件的信息。
五、捕获屏幕截图
Timeline面板可以在页面加载时捕获屏幕截图，这个特点叫做Filmstrip。
原文地址：https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool