chrome开发者工具-timeline的详细介绍

下面就为大家详细讲解一下chrome开发者工具中的timeline面板。

1. 什么是Timeline

Chrome开发者工具中的Timeline（时间线）面板为我们提供了一个时间轴视图，帮助我们分析网页的性能问题。它可以帮助我们找出网站中存在的瓶颈，进行分析和诊断。

2. Timeline的使用方法

要使用timeline面板，首先要打开开发者工具，然后在顶部面板中找到Performance（性能）标签，点击即可进入timeline面板。在timeline面板中，我们可以看到一条时间轴，对于网站完成加载所花费的时间进行了高度可视化的展示，同时也可通过如果时间轴上的对应点，来快速查看完整时间轴的那一部分所对应的详细内容。

在timeline面板中有许多事件可以让我们进行详细的分析：

2.1 Recording着录模式

• 按下快捷键Ctrl+E 或 Command+E，选择Start无视产生事件，选择End停止无视产生事件。

2.2 分析 网页加载时间

• 在timeline面板中单击Record按钮来开始时间轴记录
• 刷新网页，浏览器会记录下加载网页所花费的整个时间轴，包括HTML、CSS、JavaScript和各种资源的加载情况。此外，我们还可以看到网络请求的总数、每个请求的耗时、重定向次数、加载资源的字节数以及事件处理的时间等等。
• 在timeline面板中我们还可以使用过滤工具对行动记录进行过滤，以便更轻松地查找性能瓶颈。
• 我们可以在timeline面板上面通过不同的视图来查看分析结果，比如查看页面渲染过程中每个阶段占用的时间、JavaScript代码运行的性能数据、网络请求、系统事件等等。

例如，我们可以使用timeline面板来识别在JS执行过程中是否存在明显的性能瓶颈。在这种情况下，我们可以在面板中使用JavaScript profilers(JavaScript分析器)来分析每个JavaScript函数所占用的时间，从而找出哪些函数有待优化。

2.3 被动追踪性能

• Timeline精度很高，通过采用对页面进行全面监控和分析的定期记录模式，我们可以不仅跟踪重大的复杂WEB应用程序的性能问题，也可以跟踪单个小组件的操作性能。

3. Timeline的示例说明

下面，我们来实际操作一下吧！

3.1 查找长任务

在我们的示例中，我们将展示如何查找并优化页面中的卡顿。首先，我们打开一个网站，如https://www.baidu.com/。在timeline面板中，选择Record（录制）按钮，并在“切换到页面”事件下方看到网站原始代码加载的时间。接下来，我们通过不断滚动页面来模拟用户的滚动行为，以确定是否出现卡顿。在timeline面板中，我们可以看到滚动卡顿的时间，以及可能导致滚动卡顿的JavaScript函数。

一旦我们找到了导致滚动卡顿的函数，我们可以使用JavaScript profilers来进一步了解其性能问题。例如，我们可以尝试分离函数并对其进行优化，或者采用Lazy Loading技术来仅在需要时加载JavaScript文件。

3.2 分析加载问题

在我们的第二个示例中，我们将对网站的加载时间进行分析。我们还是打开一个需要加载的网站，并在timeline面板中选择Record按钮。在网站完全加载完成后，我们可以从timeline面板中看到加载时间轴的浪费，以及可能导致加载延迟的JavaScript函数。

通过查看各个事件节点，我们可以知道网络请求的数目、各请求的时间、耗时和字节数，我们甚至可以查看正在进行的JavaScript脚本的代码以及其耗费的时间。这些信息有助于我们确切地了解哪些部分有待优化。

总结：

以上就是关于chrome开发者工具-timeline的详细介绍，我们可以使用该面板来监测网站的性能问题，找出网站中存在的瓶颈，进行分析和诊断。使用 Timeline 面板时，我们需要特别注意开销和性能监控（例如长任务，页面渲染等）。