Chrome DevTools - 性能选项卡摘要

dni*_*els 3 google-chrome google-chrome-devtools

在 Chrome DevTools 的 Performance 选项卡上,Summary 面板显示了几类活动的时间——加载、脚本、渲染、绘画、系统、空闲。我似乎无法在 DevTools 文档中找到关于这些类别中的每一个代表什么的简明描述。我觉得我必须忽略一些明显的东西。

我发现这篇 SO post描述了渲染和绘画之间的区别。Loading 类别在我的脑海中仍然很模糊。它似乎与网络时间无关,因为我看到的加载时间明显短于我在网络选项卡上看到的请求时间。

任何人都可以指向我描述性能摘要类别的文档吗?

dni*_*els 5

@wOxxOm 向我指出了源代码(非常感谢!)。

我粗略地查看了代码,这里是我对 Chrome DevTools 性能类别的总结。

Loading:此类别包括以下事件。

  • 解析HTML
  • 解析作者样式表
  • 帧开始加载
  • 资源将发送请求
  • 资源发送请求
  • 资源接收响应
  • 资源完成
  • 资源接收数据

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

脚本:此类别包括以下事件。

  • 事件调度
  • 定时器安装
  • 定时器删除
  • 计时器火
  • XHRReadyStateChange
  • XHR负载
  • 编译脚本
  • 评估脚本
  • 编译模块
  • 评估模块
  • StreamingCompileScriptParsing;
  • WasmStreamFromResponseCallback
  • Wasm编译模块
  • 缓存模块
  • WasmModuleCacheHit
  • WasmModuleCacheInvalid
  • 标记加载
  • 标记DOM内容
  • 时间戳
  • 控制台时间
  • 用户计时
  • 运行微任务
  • 函数调用
  • GC事件
  • MajorGC
  • MinorGC
  • 框架
  • 请求动画帧
  • 取消动画帧
  • 火动画帧
  • 请求空闲回调
  • 取消空闲回调
  • FireIdleCallback
  • 网络套接字创建
  • WebSocketSendHandshakeRequest
  • WebSocketReceiveHandshakeResponse
  • 网络套接字销毁
  • 嵌入回调
  • 延迟信息
  • GC收集垃圾
  • 加密
  • CryptoDoEncrypt回复
  • 加密解密
  • CryptoDoDecryptReply
  • 加密DoDigest
  • CryptoDoDigestReply
  • 加密DoSign
  • 加密DoSign回复
  • 加密验证
  • CryptoDoVerifyReply

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

渲染:此类别包括以下事件。

  • 动画片
  • 请求主线程帧
  • 开始帧
  • 开始主线程帧
  • 并条机
  • 命中测试
  • 计划样式重新计算
  • 重新计算样式
  • 更新布局树
  • 无效布局
  • 布局
  • 更新层树
  • 滚动层
  • 马克FCP
  • 马克FMP
  • 马克LCP候选人

我以前很难理解“渲染”和“绘画”之间的区别,这篇文章帮助解释了这种区别。简而言之,渲染类别与页面布局的内存计算有关。

绘画:此类别包括以下事件。

  • 油漆设置
  • 画图
  • 更新层
  • 光栅任务
  • 复合层
  • 马克第一油漆
  • 解码图像
  • 调整图像大小

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

系统:此类别包括以下事件。

  • 流编译脚本
  • 任务
  • 程序

空闲:此类别包括以下事件。

  • StreamingCompileScriptWaiting

我不清楚的一件事是跟踪后台脚本编译事件的类别。此 Chrome 功能在此处提及并在此 Akamai 页面上进一步阐明。Scripting 和 System 类别都有似乎暗示此功能的事件。


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

gpu - 此类别包括以下事件。

  • GPU任务

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

  • 异步任务

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

  • 布局移位