Chrome开发工具 使用时间轴

由 珍珍阿姨 创建，Loen 最后一次修改 2016-08-12 使用时间轴时间轴面板可让你记录和分析在你的的应用程序运行的所有活动。它开始于你的应用程序感知调查性能问题的最佳场所。时间轴面板概述时间轴有三个主要部分：顶部的概述部分，记录视图和工具栏。要启动或停止录音，按下录制按钮切换（见制作录音）。按清除记录按钮从时间轴清除记录。胶水异步事件模式，让你更轻松地关联的异步事件的原因（请参阅关于嵌套事件）。你可以根据自己的类型或持续时间（见过滤和搜索记录）过滤时间轴显示的记录。记录过程中，被添加到记录中的每个事件记录的“瀑布”演示视图。记录被分为四个：加载，脚本，渲染和绘画。这些记录被颜色编码，如下所示：例如，下面的记录是被加载到浏览器的HTML页面的。第一个记录（发送请求）是用于在网页浏览器的HTTP请求，随后接收的响应记录（用于相应的HTTP响应），一些接收数据记录（用于实际页数据），然后一个完成加载记录。对于记录时间表及其说明事件的完整列表，请参阅时间轴事件引用。当你在一个时间轴记录悬停，将出现一个弹出与有关关联事件的详细信息。例如，下面的截图中显示的信息与图像资源相关联的完成加载记录。时间轴事件的参考说明可用于每个记录类型的详细信息。除了详细的记录来看，你可以检查录音三种模式之一：活动模式显示所有记录的事件按事件类别。帧模式显示页面的渲染性能。内存模式显示一段时间内你的页面的内存使用情况。活动模式该活动模式提供按类型组织的录制过程中被抓获的所有事件。一目了然，你可以看到你的应用程序花费最多的时间在什么类型的任务。在此视图中每个水平条的长度对应于时间的事件发生来完成。当你从事件视图（请参阅在时间轴部分拉近）选择一个时间范围，该记录视图限制为只显示那些记录。帧模式帧模式提供了洞察应用程序的渲染性能。 “帧”代表了浏览器必须做绘制的内容显示，运行JavaScript的单个帧，处理事件，更新DOM和改变风格，布局和油漆的网页的工作。我们的目标是为你的应用程序，以每秒60帧（FPS）的运行，其对应于大多数（但不是全部）视频显示器的60Hz的刷新速率。因此，你的应用程序有大约16.6毫秒（1000毫秒/ 60）对每一帧做准备。整个框架水平线代表观看了60 FPS和30 FPS帧速率的目标。一帧的高度对应于所花费的渲染帧的时间。颜色填充每一帧显示的时间对每种类型的任务类型而采取的百分比。渲染一帧时间显示在顶部视图中记录的。如果通过所显示的时间悬停，附加信息显示有关帧，包括用在每种类型的任务，CPU时间，并计算出的FPS的时间。见时间轴演示：诊断和修复同步被迫布局使用框架模式的示范。关于透明或浅灰色的框你可能会注意到一个框架是浅灰色或透明（中空）的区域。这些区域分别表示：不是由DevTools仪表活动显示刷新周期之间的空闲时间。下面，在记录帧同时显示配备工具活动和空闲时间。想在酒吧内的空白空格更多的细节？如果你碰到GPU瓶颈，阅读浏览器工程师纳特杜卡的解释，它描述了如何评估。关于绿柱画的是一个两步过程，包括：绘制调用和光栅扫描.绘制调用。这是你要画一个列表，它来源于应用到元素的CSS。抽奖的名单和打电话没有什么不同，Canvas元素：MOVETO，了lineTo和fillRect。虽然，他们在Skia的，Chrome的绘画后端不同的名字，这是一个类似的概念。光栅化。通过这些绘制调用步进和填写实际像素转换成可以被上传到GPU进行合成缓冲器。因此，与背景有什么稳定的绿色条和空的绿色条之间的区别？绿色实酒吧记录铬抽奖电话。这发生在主线程JavaScript的旁边，计算风格和布局上。合成器线程获取传递的绘制调用的数据结构的分组。空绿色条是光栅化。由合成器催生了一个工作线程来处理这些。两者都是油漆，他们只是表示该作业的不同子任务。如果您有性能问题，你可以看看什么样的属性你改变。然后，查看是否有一个合成器，只有这样才能达到同样的目的。 CSS触发器可以帮助确定一个解决这个。查看帧率统计平均帧速率，其标准差为代表的显示沿着时间轴面板所选帧范围的底部。如果您在平均帧数徘徊，似乎与有关帧选择的更多信息的弹出：选定范围 - 该选定的时间范围，并在选择的帧的数目。最小时间 - 所选定镜架的最低时间，以及在括号中的相应的帧速率。平均时间 - 所选择的帧的平均时间，并且在括号中的相应的帧速率。最大时间 - 最大时间选定范围，并在括号中的相应的帧速率。标准偏差 - 所计算的平均时间变化的量。按类别时间 - 花费在每个类型的处理的时间量，颜色编码按类型。记忆模式内存视图显示了随着时间的推移应用程序使用内存的图形和维护的文档数量的计数器，DO节点和事件侦听器在内存中保存的（也就是还没有被垃圾回收）。内存模式不能告诉你到底是什么原因造成内存泄漏，但它可以帮助你确定哪些事件在你的应用程序可能会导致内存泄漏。然后，您可以使用堆探查，以确定引起泄漏的特定代码。一种制造记录要进行录音，开始录制工作，与应用程序交互，然后停止录制。它有助于预先知道那种你想要录制的活动 - 例如，页面加载，滚动图像列表的性能，等等，然后坚持该脚本。录音：打开你想要录制的页面。打开时间轴面板，并开始录制执行下列操作之一：单击时间轴面板底部的圆形录制按钮。按键盘快捷键Ctrl + E，或者Cmd的+ E在Mac上。录制按钮录制过程中变成红色。执行任何必要的用户操作记录所需的行为。按现在的红色录音按钮，或重复的快捷键停止录制。录制页面加载一个常见的任务是记录从最初的网络请求的页面加载。键盘快捷键是有用的在这种情况下，因为他们让你快速启动录音，重新加载页面，并停止录制。录制页面加载：在新标签或窗口中打开的任何网页。打开时间轴和按CMD + E（Mac）或按Ctrl + E（在Windows / Linux）的开始录制。迅速按CMD + R或Ctrl + R重新载入浏览器页面。停车时，页面完成加载（外观为红事件标记）的记录。你的记录看起来应该像下面这样。所述firstrecord（发送请求）是用于在网页浏览器的HTTP请求，随后对相应的HTTP响应一个接收的响应的记录，接着是一个或多个接收数据的记录，一个完成载入记录和解析的HTML记录。请参阅有关每个记录类型的详细信息时间轴事件引用。提示录音制作以下是录音制作一些提示：保持记录