Chrome开发工具 使用时间轴

尽可能短。较短一般录像进行分析更容易。避免不必要的动作。尽量避免那些多余的你想记录和分析活动的行动（鼠标点击，网络负载等等）。举例来说，如果你想记录发生的事件，你点击“登录”按钮后，不滚动页面，加载图像等等。禁用浏览器的缓存。当录制网络操作，这是一个好主意，禁止在DevTools设置面板中的浏览器的缓存。禁用扩展。 Chrome扩展可以添加无关的噪音到应用程序的时间安排录音。您可以执行下列操作之一：在隐身模式下打开一个浏览器窗口创建用于测试一个新的浏览器的用户配置文件。分析时间轴记录本节提供了分析时间轴录音提示。查看有关记录的详细信息当您在时间轴中选择一条记录，详细信息窗格显示有关该事件的其他信息。某些细节中存在的所有类型，例如持续时间和CPU时间的事件，而有些只适用于某些事件类型。有关那些各种记录的信息细节包括，看到时间轴事件引用。当你选择一个画图记录，DevTools强调了与蓝色半透明的矩形更新，如下图所示画面的区域。DOMContentLoaded和Load事件标记时间轴标注每个记录用蓝色和红色的线指示，分别由DOMContentLoaded和负载事件浏览器发出。该DOMContentLoaded事件被触发时，所有的页面的DOM内容已加载和分析。加载事件一次烧成的所有文档的资源（图像和CSS文件，等等）已经被完全装载。定位强迫同步布局布局是由铬计算页面上的所有元素的位置和大小的过程。通常情况下，Chrome浏览器在执行从您的应用程序响应CSS或DOM更新布局“懒洋洋地”。这使得Chrome浏览器批量的风格和布局的变化，而不是反应到每个需求。但是，应用程序可以强制铬通过查询特定布局依赖元件性能如element.offsetWidth的值立即和同步地执行布局。这些所谓的“强迫同步布局”可能是一个很大的性能瓶颈，如果经常重复或者大DOM树进行。时间轴标识，当你的应用程序会导致强制异步布局和标记这些记录有黄色警告图标（！）。当您选择该记录，详细信息窗格中包含的问题的代码的堆栈跟踪。如果记录中包含了强制的布局的子记录，父记录标有一个稍微变暗黄色图标。展开父记录，以确定造成强迫布局的子记录。强制同步布局演示了demonstrationof检测和修复这类性能问题。关于嵌套事件在时间轴记录的事件有时在视觉上嵌套下方另一个事件。展开“父”事件查看其嵌套的“子”事件。有两个原因时间轴事件：同步事件先前发生的事件的处理过程中发生。每个事件在内部产生两个原子事件，一个用于开始，一个用于结束时，被转换为一个单一的“连续”事件。这两个原子事件之间发生的其他事件成为外部事件的儿童。下面的截图显示嵌套同步事件的一个例子。在这种情况下，浏览器被解析一些HTML（在解析HTML事件），当它发现需要被装载几个外部资源。镀铬前发了请求那些已经完成了解析，所以发送请求事件显示为解析HTML事件的孩子..时间轴的着色与记录事件嵌套时间轴条的颜色编码如下：该轴条的第一个，最黑暗的部分代表多久父事件及其所有的同步孩子了。接下来，稍白色表示该事件及其所有异步孩子们带的CPU时间。最白的条代表从第一异步事件的开始到最后它的异步儿童的结束时间。选择一个父记录将显示在详细信息窗格中的以下内容：文本事件类型总结和可视化的饼图。二是JS堆大小在这一点上的记录，什么这个操作的效果是堆大小。与事件相关的其他细节。过滤和搜索记录可以筛选根据其类型示出的记录（只显示载荷事件，例如），或仅显示记录长于或等于1毫秒或15毫秒。您还可以过滤视图以显示匹配的字符串的事件。虽然看着所有的事件，你可能需要找一个，但保持一个什么样的周围环境。在这种情况下，你可以找到没有过滤。按Ctrl+ F（窗口/ Linux）或Cmd的+ F键（Mac），而时间轴具有焦点，以显示那些包含搜索词。在时间轴部分放大为了让分析记录更容易，你可以“放大”时间轴概述，从而降低相应时间尺度的记录视图的一部分。要放大时间轴部分，执行下列操作之一：在概览区域，拖动时间轴选择与您的鼠标。调整标尺区域的灰色滑块。下面是与时间轴选择工作多一些提示：“磨砂”记录与当前选择通过拖动两个滑板条之间的区域。触控板的用户：刷卡向左或向右两个手指移动当前时间轴选择。刷卡向上或向下用两个手指扩张或收缩当前时间轴选择。滚动鼠标滚轮的同时向上或徘徊在一个时间轴选择向下扩展和收缩选择。保存和载入记录您可以保存一个时间轴记录作为一个JSON文件，后来在时间轴中打开它。要保存时间轴记录：右键+单击或Ctrl+单击（仅限Mac）时间轴内，然后选择保存时间线数据...，或者按Ctrl + S键键盘shorcut。选择一个位置来保存文件，然后点击保存。要打开现有的时间轴记录的文件，请执行下列操作之一：用鼠标右键单击或Ctrl+单击时间轴内选择Load时间轴数据...，或按下Ctrl+ O快捷键。找到JSON文件并单击打开。用户产生的事件时间表应用程序可以添加他们自己的事件到时间线录音。您可以使用theconsole.timeStamp（）方法来一个原子事件添加到记录，theconsole.time（）和 console.timeEnd（）methodsto标志着时间代码执行范围。例如，在下面的记录console.timeStamp（）已用于显示“添加结果”事件。查看时间线中使用控制台获取更多信息标记。录像中查看CPU时间你会看到上面出现在时间轴记录浅灰色条，表示当CPU很忙。徘徊在一个CPU吧突出时间轴地区在此期间，CPU是活动的（如下图所示）。一个CPU杆的长度通常是它下面所有的（高亮）事件在时间轴的总和。如果两者不匹配，这可能是由于以下之一：检查同一线程的页运行的其他页面（例如，两个标签从同一部位开放，同一个站点做一些在一个setTimeout（）调用）。UN-仪表活动。时间轴事件引用本节列出并说明了各个类型的类型所举办的录制过程中生成的记录，和它们的属性。常见的事件属性某些细节存在于所有类型的事件，而有些只适用于某些事件类型。本节列出了常见的不同事件类型的属性。特定于某些事件类型性能列于对于那些遵循事件类型的引用。时间汇总对于嵌套的事件事件，采取的每一类事件的时间。调用栈对于有孩子的事件事件，采取的每一类事件的时间。CPU时间多少CPU时间记录的事件发生。详细信息有关该事件的其他细节。持续时间（在时间戳）过了多长时间的情况下与所有的孩子完成的;时间戳是时间事件发生，相对于记录时开始。