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

通用的时间轴事件属性

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

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

Loading(加载)事件

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

事件 描述
Parse HTML
解析HTML
Chrome执行其HTML解析算法。
Finish Loading
结束加载
一个网络请求完成
Receive Data
接收数据
收到请求的数据。 将有一个或多个接收数据事件。
Receive Response
接收响应
来自一个请求的初始HTTP响应。
Send Request
发送请求
网络请求已发送。

Loading(加载)事件属性

属性 描述
Resource
资源
所请求资源的URL。
Preview
预览
预览所有请求的资源 (仅限`image`)。
Request Method
请求方法
用于请求的HTTP方法(例如:`GET`或`POST`)。
Status Code
状态码
HTTP响应状态码。
MIME Type
MIME类型
所请求资源的MIME类型。
Encoded Data Length
编码数据长度
以字节为单位的请求资源的长度。

Scripting(脚本)事件

这部分列出属于 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完成加载。

Scripting(脚本)事件属性

属性 描述
Timer ID
计时器ID
计时器ID。
Timeout
超时
计时器指定的超时时间。
Repeats
重复
布尔值,如果计时器重复。
Function Call
函数调用
一个函数被调用

Rendering(渲染)事件

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

事件 描述
Invalidate layout
布局无效
通过DOM修改使页面布局无效。
Layout
布局
执行了页面布局。
Recalculate style
重新计算样式
Chrome重新计算元素样式。
Scroll
滚动
内嵌的视图内容已滚动。

Rendering(渲染)事件属性

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

Painting(绘制)事件

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

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

Painting(绘制)事件属性

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

说明

翻译自:https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/performance-reference

 

本文内容来自:Chrome DevTools谷歌浏览器时间轴事件参考 – Break易站


—Author: Arvin Chen —Web Address: www.breakyizhan.com (Break易站)

 
转载请保留页面地址:https://www.breakyizhan.com/chromeconsole/2153.html
扫描二维码添加微信 
  • ,每次淘宝领取淘宝优惠券,淘宝购物更优惠。现在添加微信,还可以领取机械键盘50元优惠券!添加微信后回复机械键盘即可领取!
    支持我们,就用微信淘宝!