Google chrome Chrome开发工具-性能选项卡摘要

在Chrome DevTools中的Performance选项卡上，Summary面板显示了几类活动的计时-加载、脚本编写、渲染、绘制、系统、空闲。在DevTools文档中，我似乎找不到这些类别所代表的内容的简明描述。我觉得我必须忽略一些显而易见的事情

我发现这描述了渲染和绘画之间的区别。在我看来，装载类别仍然很模糊。它似乎与网络计时无关，因为我看到的加载时间比我看到的网络选项卡上的请求时间要短得多

---

有人能给我指一下描述性能摘要类别的文档吗？

@wOxxOm给我指了指源代码（非常感谢！）

我粗略地回顾了代码，下面是我对ChromeDevTools性能类别的总结

加载：此类别包括以下事件

• 解析HTML
• ParseAuthorStyleSheet
• 框架开始加载
• ResourceWillSendRequest
• 资源发送请求
• 资源接受者责任
• 资源整理
• 资源接收数据

请注意，网络“飞行中”时间似乎不包括在此类别中。该类别包括设置网络呼叫的计时，但该类别中不包含网络呼叫本身的时间。您可以通过运行一个测试来验证这一点，在该测试中，您在“网络”选项卡上记录网络时间，并在“性能”选项卡上记录性能时间。例如，当从本地服务器下载页面时，性能选项卡加载时间为37 ms；“网络”选项卡显示发出了26个请求，其中10个请求由缓存满足，但其余请求耗时624 ms。“性能”选项卡上显示的37 ms似乎是呼叫设置，而“网络”选项卡上显示的624 ms似乎是实际的飞行中请求/响应时间

脚本编写：此类别包括以下事件

• 事件调度
• TimerInstall
• 计时器移动
• 计时器火
• xhreadystatechange
• XHRLoad
• 编撰
• EvaluateScript
• 编译模块
• 评价模块
• 简化编译说明
• WasmStreamFromResponseCallback
• wasmcompiled模块
• Wasmcached模块
• wasmmoulecachehit
• WasmModuleCacheInvalid
• 标记载荷
• 标记内容
• 时间戳
• 慰藉
• 用户定时
• 运行微任务
• 函数调用
• GCEvent
• MajorGC
• 米诺尔格
• JSFrame
• 请求动画帧
• 取消动画帧
• 火焰动画框架
• 请求回拨
• 取消回拨
• FireIdleCallback
• WebSocketCreate
• WebSocketSendHandshakeRequest
• WebSocket接收握手响应
• WebSocketDestroy
• EmbedderCallback
• 晚音
• 垃圾收集
• 加密
• 加密回复
• 隐密码
• 密码密码应答
• 隐孢子虫
• 隐孢子虫
• 隐剂量学
• 加密剂量学应答
• 隐斑鸠
• 隐斑鸠

我认为这类事件是您所期望的——脚本编译、函数调用、垃圾收集等等

渲染：此类别包括以下事件

• 动画
• RequestMainThreadFrame
• BeginFrame
• BeginMainThreadFrame
• 牵引架
• 致命的
• 计划重新计算
• 重排叶
• 更新树
• 失效失效
• 布局
• 更新树
• 滚动层
• MarkFCP
• MarkFMP
• MarkLCPCandidate

我以前很难理解“渲染”和“绘画”之间的区别，并帮助解释了区别。简而言之，呈现类别与页面布局的内存计算有关

绘画：该类别包括以下事件

• 油漆装置
• 绘画图像
• 更新层
• 油漆
• 刺刀任务
• 合成工
• MarkFirstPaint
• 解码图像
• 调整图像大小

“绘制”类别中的事件与在屏幕上实际绘制像素有关

系统：此类别包括以下事件

• 流化编译脚本
• 任务
• 节目

空闲：此类别包括以下事件

• 流化编译描述

---

我不清楚的一件事是跟踪后台脚本编译事件的类别。Chrome的这一特性在上一节中提到并进一步阐明。脚本和系统类别都有似乎暗示此功能的事件

---

值得一提的是，Chrome似乎还有一些其他的事件类别可以跟踪，但在DevTools中不可见。这些类别包括：

gpu-此类别包括以下事件

• GPUTask

异步-此类别包括以下事件

• 异步任务

体验-此类别包括以下事件

• 排班

---

检查源代码：

加载

。