时间线事件参考Timeline Event reference

时间线事件模式显示录制时触发的所有事件。The timeline events mode displays all events triggered while making a recording. 使用时间线事件引用了解有关每个时间线事件类型更多信息。Use the timeline event reference to learn more about each timeline event type.

常见时间线事件属性Common timeline event properties

某些详细信息存在于所有类型的事件,而某些仅适用于特定事件类型。Certain details are present in events of all types, while some only apply to certain event types. 本节列出了不同事件类型通用的属性。This section lists properties common to different event types. 特定于特定事件类型的属性在后续事件类型的引用中列出。Properties specific to certain event types are listed in the references for those event types that follow.

属性Property 何时显示When is it shown
聚合时间Aggregated time 对于具有 嵌套事件的事件,每个事件类别所花时间。For events with nested events, the time taken by each category of events.
调用堆栈Call Stack 对于具有 子事件的事件,表示每个事件类别所花时间。For events with child events, the time taken by each category of events.
CPU 时间CPU time 记录的事件占用的 CPU 时间。How much CPU time the recorded event took.
详细信息Details 有关事件的其他详细信息。Other details about the event.
Duration \ (at time-stamp) Duration (at time-stamp) 事件及其所有子项完成所用时间;timestamp 是事件发生的时间,相对于录制的开始时间。How long it took the event with all of its children to complete; timestamp is the time at which the event occurred, relative to when the recording started.
自时间Self time 事件在没有任何子事件的情况下所发生时间。How long the event took without any of its children.
使用的堆大小Used Heap Size 记录事件时应用程序使用的内存量,以及自上次采样以来使用的堆大小的增量 \ (+/-) 更改。Amount of memory being used by the application when the event was recorded, and the delta (+/-) change in used heap size since the last sampling.

加载事件Loading events

此部分列出了属于 Loading 类别的事件及其属性。This section lists events that belong to Loading category and their properties.

事件Event 说明Description
分析 HTMLParse HTML Microsoft Edge HTML 分析算法。Microsoft Edge ran the HTML parsing algorithm.
完成加载Finish Loading 网络请求已完成。A network request completed.
接收数据Receive Data 已接收请求的数据。Data for a request was received. 有一个或多个接收数据事件。There are one or more Receive Data events.
接收响应Receive Response 来自请求的初始 HTTP 响应。The initial HTTP response from a request.
发送请求Send Request 已发送网络请求。A network request has been sent.

加载事件属性Loading event properties

属性Property 说明Description
资源Resource 所请求资源的 URL。The URL of the requested resource.
预览Preview 仅预览请求的资源 \ () 。Preview of the requested resource (images only).
Request 方法Request Method 用于请求 \ (或 的 HTTP 方法,例如 GET POST ) 。HTTP method used for the request (GET or POST, for example).
状态代码Status Code HTTP 响应代码。HTTP response code.
MIME 类型MIME Type 所请求资源的 MIME 类型。MIME type of the requested resource.
编码数据长度Encoded Data Length 请求的资源的长度(以字节为单位)。Length of requested resource in bytes.

脚本事件Scripting events

本节列出了属于"脚本"类别的事件及其属性。This section lists events that belong to the Scripting category and their properties.

事件Event 说明Description
触发的动画帧Animation Frame Fired 触发的计划动画帧及其回调处理程序已调用。A scheduled animation frame fired, and its callback handler invoked.
取消动画帧Cancel Animation Frame 已取消计划的动画帧。A scheduled animation frame was canceled.
GC 事件GC Event 发生垃圾回收。Garbage collection occurred.
DOMContentLoadedDOMContentLoaded DOMContentLoaded 事件由浏览器触发。The DOMContentLoaded event was fired by the browser. 加载和分析页面的所有 DOM 内容时,将触发此事件。This event is fired when all of the DOM content of the page is loaded and parsed.
评估脚本Evaluate Script 已评估脚本。A script was evaluated.
事件Event JavaScript 事件 \ (例如 , mousedownkey ) 。A JavaScript event (for example, mousedown, or key).
函数调用Function Call 进行了顶级 JavaScript 函数调用 \ (浏览器进入 JavaScript engine) 。A top-level JavaScript function call was made (only appears when browser enters JavaScript engine).
安装计时器Install Timer 计时器是使用 setInterval () setTimeout () 创建的。A timer was created with setInterval() or setTimeout().
请求动画帧Request Animation Frame 安排 requestAnimationFrame() 新帧的呼叫。A requestAnimationFrame() call scheduled a new frame.
删除计时器Remove Timer 已清除之前创建的计时器。A previously created timer was cleared.
时间Time 一个称为 console.time () 脚本。A script called console.time().
时间结束Time End 名为 console.timeEnd 的脚本 () 。A script called console.timeEnd().
计时器触发Timer Fired 使用 或 计划触发的 setInterval() 计时器 setTimeout()A timer fired that was scheduled with setInterval() or setTimeout().
XHR 就绪状态更改XHR Ready State Change XMLHTTPRequest 的就绪状态已更改。The ready state of an XMLHTTPRequest changed.
XHR LoadXHR Load 已完成 XMLHTTPRequest 加载。An XMLHTTPRequest finished loading.

脚本事件属性Scripting event properties

属性Property 说明Description
计时器 IDTimer ID 计时器 ID。The timer ID.
超时Timeout 计时器指定的超时。The timeout specified by the timer.
重复Repeats 指定计时器是否重复的布尔值。Boolean that specifies if the timer repeats.
函数调用Function Call 已调用的函数。A function that was invoked.

呈现事件Rendering events

此部分列出了属于"呈现"类别及其属性的事件。This section lists events that belong to Rendering category and their properties.

事件Event 说明Description
无效布局Invalidate layout 页面布局因 DOM 更改而无效。The page layout was invalidated by a DOM change.
布局Layout 已完成页面布局。A page layout was completed.
重新计算样式Recalculate style Microsoft Edge重新计算的元素样式。Microsoft Edge recalculated element styles.
滚动Scroll 已滚动嵌套视图的内容。The content of nested view was scrolled.

呈现事件属性Rendering event properties

属性Property 说明Description
布局无效Layout invalidated 对于布局记录,是导致布局失效的代码堆栈跟踪。For Layout records, the stack trace of the code that caused the layout to be invalidated.
需要布局的节点Nodes that need layout 对于布局记录,表示在启动中继之前标记为需要布局的节点数。For Layout records, the number of nodes that were marked as needing layout before the relayout started. 这些节点通常是开发人员代码无效的节点,以及中继根的向上路径。These are normally those nodes that were invalidated by developer code, plus a path upward to relayout root.
布局树大小Layout tree size 对于布局记录,中继根 \ (节点下的节点总数Microsoft Edge relayout) 。For Layout records, the total number of nodes under the relayout root (the node that Microsoft Edge starts the relayout).
布局范围Layout scope 可能的值为 Partial \ (重布局边界是 DOM) 或 的一部分 Whole documentPossible values are Partial (the re-layout boundary is a portion of the DOM) or Whole document.
受影响的元素Elements affected 对于"重新计算样式记录",为受样式重新计算影响的元素数。For Recalculate style records, the number of elements affected by a style recalculation.
样式无效Styles invalidated 对于"重新计算样式"记录,提供导致样式无效的代码的堆栈跟踪。For Recalculate style records, provides the stack trace of the code that caused the style invalidation.

Painting 事件Painting events

此部分列出了属于 Painting 类别的事件及其属性。This section lists events that belong to Painting category and their properties.

事件Event 说明Description
复合层Composite Layers 用于呈现引擎的复合Microsoft Edge层。The composited image layers for the Microsoft Edge rendering engine.
图像解码Image Decode 已解码图像资源。An image resource was decoded.
图像调整大小Image Resize 从图像本机尺寸调整了图像的大小。An image was resized from its native dimensions.
画图Paint 复合层绘制到屏幕的一个区域。Composited layers were painted to a region of the display. 将鼠标悬停在画图可突出显示已更新的屏幕区域。Hovering over a Paint record highlights the region of the display that was updated.

Painting 事件属性Painting event properties

属性Property 说明Description
位置Location 对于画图,绘制矩形的 x 和 y 坐标。For Paint events, the x and y coordinates of the paint rectangle.
维度Dimensions 对于画图,为绘制区域的高度和宽度。For Paint events, the height and width of the painted region.

联系 Microsoft Edge DevTools 团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
原始页面位于此处,Meggin Kearney \ (Tech Writer) and Flavio Copes \ (Full Stack Developer) 创作。The original page is found here and is authored by Meggin Kearney (Tech Writer) and Flavio Copes (Full Stack Developer).

Creative Commons License
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.