Chrome DevTools - 性能选项卡摘要
Chrome DevTools - Performance Tab Summary
在 Chrome DevTools 的“性能”选项卡上，“摘要”面板显示几类活动的时间 - 加载、脚本、渲染、绘画、系统、空闲。我似乎无法在 DevTools 文档中找到关于每个类别所代表的内容的简明描述。我觉得我必须忽略一些明显的东西。
我发现 this SO post 描述了渲染和绘画之间的区别。加载类别在我的脑海中仍然很模糊。它似乎与网络时间无关，因为我看到的加载时间明显短于我在“网络”选项卡上看到的请求时间。
任何人都可以指出描述性能摘要类别的文档吗？
@wOxxOm 向我指出了源代码（非常感谢！）。
我粗略地查看了代码，这里是我对 Chrome DevTools 性能类别的总结。
正在加载：此类别包括以下事件。
- 解析 HTML
- ParseAuthorStyleSheet
- FrameStartedLoading
- ResourceWillSendRequest
- 资源发送请求
- ResourceReceiveResponse
- 资源完成
- ResourceReceivedData
请注意，网络 "in-flight" 时间似乎未包含在此类别中。此类别包括设置网络呼叫的时间，但网络呼叫本身的时间未包含在该类别中。您可以通过 运行 一项测试来验证这一点，您可以在测试中记录“网络”选项卡上的网络时间和“性能”选项卡上的性能时间。例如，从本地服务器下载页面时，“性能”选项卡加载时间为 37 毫秒； Network 选项卡显示发出了 26 个请求，其中 10 个请求被缓存满足，但其余请求耗时 624 ms。 “性能”选项卡上显示的 37 毫秒似乎是呼叫的设置，而“网络”选项卡上的 624 毫秒似乎是实际的飞行 request/response 次。
脚本：此类别包括以下事件。
- 事件调度
- 定时器安装
- TimerRemove
- TimerFire
- XHRReadyStateChange
- XHRLoad
- 编译脚本
- EvaluateScript
- 编译模块
- 评估模块
- StreamingCompileScriptParsing;
- WasmStreamFromResponseCallback
- WasmCompiledModule
- WasmCachedModule
- WasmModuleCacheHit
- WasmModuleCacheInvalid
- 标记加载
- MarkDOMContent
- 时间戳
- 控制台时间
- 用户计时
- 运行微任务
- 函数调用
- GCEvent
- 主要GC
- 次要GC
- JSFrame
- RequestAnimationFrame
- 取消动画帧
- FireAnimationFrame
- RequestIdleCallback
- 取消空闲回调
- FireIdleCallback
- WebSocketCreate
- WebSocketSendHandshakeRequest
- WebSocketReceiveHandshakeResponse
- WebSocketDestroy
- 嵌入器回调
- 延迟信息
- GCCollectGarbage
- CryptoDoEncrypt
- CryptoDoEncryptReply
- 加密解密
- CryptoDoDecryptReply
- CryptoDoDigest
- CryptoDoDigest回复
- CryptoDoSign
- CryptoDoSignReply
- CryptoDoVerify
- CryptoDoVerifyReply
此类别中的事件是我认为您会期望的 - 脚本编译、函数调用、垃圾收集等。
呈现：此类别包括以下事件。
- 动画
- RequestMainThreadFrame
- 开始帧
- BeginMainThreadFrame
- DrawFrame
- 命中测试
- ScheduleStyleRecalculation
- 重新计算样式
- 更新布局树
- 无效布局
- 布局
- 更新图层树
- 滚动图层
- MarkFCP
- 马克FMP
- MarkLCPCandidate
我以前很难理解 "rendering" 和 "painting" 之间的区别，this SO post 帮助解释了区别。简而言之，渲染类别与页面布局的内存计算有关。
绘画：此类别包括以下事件。
- 画图设置
- 画图
- 更新图层
- 绘画
- 光栅任务
- 复合图层
- MarkFirstPaint
- 解码图像
- 调整图片大小
绘画类别中的事件与在屏幕上实际绘制像素有关。
系统：该类别包括以下事件。
- StreamingCompileScript
- 任务
- 计划
空闲：此类别包括以下事件。
- StreamingCompileScriptWaiting
我不清楚跟踪后台脚本编译事件的类别。此 Chrome 功能被提及 here and further clarified on this Akamai page。脚本和系统类别都有似乎暗示此功能的事件。
值得一提的是，Chrome 似乎还有一些它跟踪的其他事件类别，但在 DevTools 中不可见。这些类别是：
gpu - 此类别包括以下事件。
- GPU任务
async - 此类别包括以下事件。
- 异步任务
经验 - 此类别包括以下事件。
- LayoutShift
在 Chrome DevTools 的“性能”选项卡上，“摘要”面板显示几类活动的时间 - 加载、脚本、渲染、绘画、系统、空闲。我似乎无法在 DevTools 文档中找到关于每个类别所代表的内容的简明描述。我觉得我必须忽略一些明显的东西。
我发现 this SO post 描述了渲染和绘画之间的区别。加载类别在我的脑海中仍然很模糊。它似乎与网络时间无关，因为我看到的加载时间明显短于我在“网络”选项卡上看到的请求时间。
任何人都可以指出描述性能摘要类别的文档吗？
@wOxxOm 向我指出了源代码（非常感谢！）。
我粗略地查看了代码，这里是我对 Chrome DevTools 性能类别的总结。
正在加载：此类别包括以下事件。
- 解析 HTML
- ParseAuthorStyleSheet
- FrameStartedLoading
- ResourceWillSendRequest
- 资源发送请求
- ResourceReceiveResponse
- 资源完成
- ResourceReceivedData
请注意，网络 "in-flight" 时间似乎未包含在此类别中。此类别包括设置网络呼叫的时间，但网络呼叫本身的时间未包含在该类别中。您可以通过 运行 一项测试来验证这一点，您可以在测试中记录“网络”选项卡上的网络时间和“性能”选项卡上的性能时间。例如，从本地服务器下载页面时，“性能”选项卡加载时间为 37 毫秒； Network 选项卡显示发出了 26 个请求，其中 10 个请求被缓存满足，但其余请求耗时 624 ms。 “性能”选项卡上显示的 37 毫秒似乎是呼叫的设置，而“网络”选项卡上的 624 毫秒似乎是实际的飞行 request/response 次。
脚本：此类别包括以下事件。
- 事件调度
- 定时器安装
- TimerRemove
- TimerFire
- XHRReadyStateChange
- XHRLoad
- 编译脚本
- EvaluateScript
- 编译模块
- 评估模块
- StreamingCompileScriptParsing;
- WasmStreamFromResponseCallback
- WasmCompiledModule
- WasmCachedModule
- WasmModuleCacheHit
- WasmModuleCacheInvalid
- 标记加载
- MarkDOMContent
- 时间戳
- 控制台时间
- 用户计时
- 运行微任务
- 函数调用
- GCEvent
- 主要GC
- 次要GC
- JSFrame
- RequestAnimationFrame
- 取消动画帧
- FireAnimationFrame
- RequestIdleCallback
- 取消空闲回调
- FireIdleCallback
- WebSocketCreate
- WebSocketSendHandshakeRequest
- WebSocketReceiveHandshakeResponse
- WebSocketDestroy
- 嵌入器回调
- 延迟信息
- GCCollectGarbage
- CryptoDoEncrypt
- CryptoDoEncryptReply
- 加密解密
- CryptoDoDecryptReply
- CryptoDoDigest
- CryptoDoDigest回复
- CryptoDoSign
- CryptoDoSignReply
- CryptoDoVerify
- CryptoDoVerifyReply
此类别中的事件是我认为您会期望的 - 脚本编译、函数调用、垃圾收集等。
呈现：此类别包括以下事件。
- 动画
- RequestMainThreadFrame
- 开始帧
- BeginMainThreadFrame
- DrawFrame
- 命中测试
- ScheduleStyleRecalculation
- 重新计算样式
- 更新布局树
- 无效布局
- 布局
- 更新图层树
- 滚动图层
- MarkFCP
- 马克FMP
- MarkLCPCandidate
我以前很难理解 "rendering" 和 "painting" 之间的区别，this SO post 帮助解释了区别。简而言之，渲染类别与页面布局的内存计算有关。
绘画：此类别包括以下事件。
- 画图设置
- 画图
- 更新图层
- 绘画
- 光栅任务
- 复合图层
- MarkFirstPaint
- 解码图像
- 调整图片大小
绘画类别中的事件与在屏幕上实际绘制像素有关。
系统：该类别包括以下事件。
- StreamingCompileScript
- 任务
- 计划
空闲：此类别包括以下事件。
- StreamingCompileScriptWaiting
我不清楚跟踪后台脚本编译事件的类别。此 Chrome 功能被提及 here and further clarified on this Akamai page。脚本和系统类别都有似乎暗示此功能的事件。
值得一提的是，Chrome 似乎还有一些它跟踪的其他事件类别，但在 DevTools 中不可见。这些类别是：
gpu - 此类别包括以下事件。
- GPU任务
async - 此类别包括以下事件。
- 异步任务
经验 - 此类别包括以下事件。
- LayoutShift