如何使用Goolge Timeline工具

时间:2021-01-26 05:28:05

网上中文的资料版本比较老,找到一个新版本的英文介绍,翻一下,原文:https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool?hl=zh

TimeLine 面板总览

4部分组成:

1.控制面板

包含开始记录,结束记录,配置我要捕获什么内容组成

2.概述面板

页面性能的高度总结,详见下文。

3.火焰图面板

Cpu栈的可视化描述

4.细节面板

当一个事件被选中,这个面板会显示有关这个事件的更多信息。如果没有事件选中,会显示选中的火焰图的信息。

如何使用Goolge Timeline工具

概述面板

该面板有3部分图组成:

1.FPS

每秒的火焰。绿色的柱状越高,fps越高。fps上红色的区块预示着长火焰,有可能是卡顿产生了。(动画渲染时间超过了屏幕的刷新时间)

2.cpu

cpu资源。这个面积图指示了哪种事件消耗CPU资源多。

3.net

每个彩色柱代表一种资源。柱子越高,获取它的时间越长。每个柱较淡颜色的部分代表了它的等待时间(发送请求到第一个比特下载下来的时间)。深色的部分代表它的处理时间(第一个比特接收

到最后一个比特接收的时间)

柱子的颜色对应如下:

html文件是蓝色。

script问件事黄色。

Stylesheets文件是紫色。

media文件是绿色。

其他文件是灰色。

如何使用Goolge Timeline工具

做一个记录

记录一个页面的载入过程,我们需要打开Timeline面板,打开我们需要记录的网页,刷新网页,就会自动开始记录(经测试不可以,得在timeline面板按F5)

如果要记录页面交互,按(如何使用Goolge Timeline工具) 或Ctrl+e开始记录,页面操作,然后按红色按钮结束记录。

当记录结束,工具组会自动缩放到和你最相关的部分给你查看。

记录小贴士

让纪录的时间越短越好:短时间让你更容易分析。

避免不必要的动作

禁用浏览器缓存

禁用拓展插件

查看记录细节

当你选中火焰表的一个事件,细节面板会显示更多有关的细节。

如何使用Goolge Timeline工具

一些选项卡,比如Summary,是所有类型的事件。而其他的选项卡只显示某一种事件,查看Timeline event reference获得更多的记录类型。

纪录同时捕获截图

TimeLine面板可以在载入页面的时候捕获截图。这就是传说中的幻灯片(连续截图)

使用方法就是在控制面板选中Screenshots ,然后在概述面板中鼠标放上去就能看了

JavaScript切图

在控制面板中选中JS Profile选项框,这样你就可以在火焰图中看到每个Js函数的调用情况。

如何使用Goolge Timeline工具

painting切图

当在控制面板中选中Paint,记录后你可以单击一个Paint事件,然后你可以在细节面板中查看

如何使用Goolge Timeline工具

渲染配置

打开工具主菜单,选择 More tools > Rendering settings打开配置面板,这个会对于调试paint相关的有帮助。具体如下:

如何使用Goolge Timeline工具

搜索记录

输入Ctrl+F (Windows / Linux) 打开,输入事件名称查询,比如 Event