chrome中Timeline的使用（译）

一、概括　　

Timeline面板包括以下四个部分：

1. 控制面板。开始记录、停止记录、配置捕获信息；
2. 概况。页面性能的整体概况；
3. flame chart。直观展示cpu堆的情况。你能够看到三条虚线，蓝色的代表DOM生成完毕，绿色的代表第一次绘制，红色代表加载完毕；
4. 细节。当一个事件被选中，这块区域显示事件的更全面信息。当没有事件被选中，展示关于选中的事件帧的信息。

 

二、概况面板

　　概况面板包含三个图：

1. FPS。每秒的帧数量。绿色块越高，FPS越高。在绿色块上面的红色块表明每帧的事件过长，可能出现卡顿；
2. CPU。每种事件的CPU占用。
3. NET。每个颜色的块代表一种资源，块长度越长，获取此资源的时间也越长。较浅的区域表示等待时间（从发送请求到接收到第一个byte的时间）。深色区域代表传输事件。HTML 文件是蓝色的，Scripts是黄色的， * 样式表是紫色的，媒体文件是绿色的，混杂资源是灰色。

 

三、记录

　　记录一个页面加载，打开Timeline面板，打开你想记录的页面，然后刷新页面，timeline面板将自动记录页面重载。

　　记录页面交互，打开Timeline面板，点击RECORD按钮，RECORD按钮在记录时变成红色，执行页面交互，然后停止记录。

　　当记录完成后，DevTools会自动猜测哪部分与你相关，自动放大此本分。

记录小贴士：

1. 记录时间越短越好
2. 避免不必要操作
3. 禁止浏览器缓存
4. 禁止插件扩展

 

四、记录细节

　　当你在flame chart中选择了一个事件，细节面板会显示该事件的信息。

 

五、捕获屏幕截图

　　Timeline面板可以在页面加载时捕获屏幕截图，这个特点叫做Filmstrip。

 

原文地址：https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool