时间轴事件参考

优质

小牛编辑

131浏览

2023-12-01

时间轴事件模型显示并录制触发的所有事件。使用时间轴事件参考可了解有关每个时间轴事件类型的详细信息。

通用的时间轴事件属性

某些细节存在于所有类型的事件中，而一些仅适用于某些事件类型。这个部分列出了不同事件类型的通用属性。某些事件类型的特定属性在以下事件类型的引用中列出。

属性	显示详情
Aggregated time 聚合时间	对于具有嵌套事件的事件，每个事件类别所花费的时间。
Call Stack 访问栈	对于具有子事件的事件，每个事件类别所花费的时间。
CPU time CPU 时间	录制的事件占用了多少CPU时间。
Details 详细信息	关该事件的其他详细信息。
Duration (at time-stamp) 持续时间（时间戳）	事件和子事件完成所花费的时间;时间戳是事件发生的开始时间，相对于录制开始的时间。
Self time 自身时间	事件本身完成所花费的时间，不包括子事件。
Used Heap Size 使用的堆大小	当录制事件时，应用程序所耗内存，和上次采样以来使用堆大小的增量（+/-）变化。

这部分列出属于 Loading(加载) 类别的事件和他们的属性。

这部分列出属于 Scripting(脚本) 类别的事件和他们的属性。

事件	描述
Animation Frame Fired 动画帧发射	一个预定的动画帧被触发，并调用它的回调处理程序。
Cancel Animation Frame 取消动画帧	A scheduled animation frame was canceled.
GC Event GC事件	垃圾回收时触发
DOMContentLoaded	浏览器触发 DOMContentLoaded 。当所有网页的DOM内容都已加载并解析时，会触发此事件。
Evaluate Script 计算脚本	评估一个脚本。
Event 事件	avaScript事件（例如："mousedown", 或者 "key"）。
Function Call 函数调用	进行了顶级JavaScript函数调用（仅在浏览器进入JavaScript引擎时显示）。
Install Timer 安装计时器	使用 setInterval() 或 setTimeout() 创建的一个计时器。
Request Animation Frame 请求动画帧	`requestAnimationFrame()` 调用一个预定的新帧。
Remove Timer 移除计时器	先前创建的定时器被移除。
Time 计时	调用 console.time()
Time End 结束计时	调用 console.timeEnd()
Timer Fired 计时器触发	调用先前定义的 `setInterval()` 或者 `setTimeout()` 触发定时器
XHR Ready State Change XHR就绪状态更改	XMLHTTPRequest的就绪状态发生变化。
XHR Load	An `XMLHTTPRequest` XMLHTTPRequest完成加载。

这部分列出属于 Rendering(渲染) 类别的事件和他们的属性。

属性	描述
Layout invalidated 布局无效	对于布局录制，代码的堆栈跟踪导致布局无效。
Nodes that need layout 需要布局的节点	对于布局录制，在重新开始启动之前标记为需要布局的节点数。这些节点通常是由开发人员无效的节点代码，加上一个向上到relayout根的路径。
Layout tree size 布局树大小	对于布局录制，继承根下的节点总数（Chrome启动重新布局的节点）。
Layout scope 布局范围	可能的值为`Partial` （重新布局边界是DOM的一部分）或`Whole document"`(整个文档)。
Elements affected 受影响的元素	对于重新计算样式录制，受样式重新计算影响的元素数量。
Styles invalidated 样式无效	对于重新计算样式录制，提供导致style无效的代码栈跟踪。

这部分列出属于 Painting(绘制) 类别的事件和他们的属性。

事件	描述
Composite Layers 复合层	Chrome的渲染引擎合成图像图层。
Image Decode 图像解码	图像资源被解码。
Image Resize 图像调整大小	图片的原始尺寸已调整大小。
Paint 绘制	复合层被绘制到显示器的一个区域。悬停在绘制录制上，突出显示已更新的显示区域。

属性	描述
Location 位置	对于`Paint`(绘制)事件，绘制矩形的x和y坐标。
Dimensions 尺寸	对于`Paint`(绘制)事件，绘制矩形的高度和宽度。