logo标签列表

Chrome DevTools - 性能选项卡总览

google-chromegoogle-chrome-devtools
9
在Chrome DevTools的性能选项卡中，概要面板显示了几类活动的计时 - 加载、脚本、呈现、绘画、系统和空闲。我找不到DevTools文档中对这些类别分别表示什么的简明描述。我觉得自己可能忽略了一些显而易见的东西。
我在Stack Overflow上找到了解释呈现和绘画之间区别的文章。但加载这个分类对我来说还是很模糊的。它似乎与网络计时无关，因为我在网络选项卡上看到的请求时间比我在加载分类下看到的时间要长得多。
有人可以指向描述性能摘要类别的文档吗？
检查源代码：loading 包括许多活动。 - wOxxOm
1个回答
16
@wOxxOm指引我浏览源代码（非常感谢！）。
我粗略地审查了代码，以下是我对Chrome DevTools性能类别的总结： 加载：此类别包括以下事件。
- ParseHTML - ParseAuthorStyleSheet - FrameStartedLoading - ResourceWillSendRequest - ResourceSendRequest - ResourceReceiveResponse - ResourceFinish - ResourceReceivedData
请注意，网络“飞行”时间似乎不包含在这个类别中。此类别包括设置网络调用的时间，但网络调用本身的时间并未捕获到该类别中。您可以通过运行一项测试，在Network选项卡上记录网络时间和性能选项卡上的性能时间来验证此操作。例如，当从本地服务器下载页面时，Performance选项卡的加载时间为37毫秒； Network选项卡显示发出26个请求，其中10个请求由缓存满足，但其余请求需要624毫秒。在性能选项卡上显示的37毫秒似乎是呼叫的设置时间，而在Network选项卡上显示的624毫秒似乎是实际的飞行请求/响应时间。 脚本：此类别包括以下事件。
- EventDispatch - TimerInstall - TimerRemove - TimerFire
  • XHRReadyStateChange（XMLHttpRequest ReadyState变化）
  • XHRLoad（XMLHttpRequest 加载完成）
  • CompileScript（脚本编译）
  • EvaluateScript（脚本执行）
  • CompileModule（模块编译）
  • EvaluateModule（模块执行）
  • StreamingCompileScriptParsing（流式脚本解析）
  • WasmStreamFromResponseCallback（Wasm流从响应回调）
  • WasmCompiledModule（已编译的Wasm模块）
  • WasmCachedModule（缓存的Wasm模块）
  • WasmModuleCacheHit（Wasm模块缓存命中）
  • WasmModuleCacheInvalid（Wasm模块缓存失效）
  • MarkLoad（标记加载时间）
  • MarkDOMContent（标记DOM内容加载完成时间）
  • TimeStamp（时间戳）
  • ConsoleTime（控制台计时器）
  • UserTiming（用户计时）
  • RunMicrotasks（运行微任务）
  • FunctionCall（函数调用）
  • GCEvent（垃圾回收事件）
  • MajorGC（大型垃圾回收）
  • MinorGC（小型垃圾回收）
  • JSFrame（JavaScript帧）
  • RequestAnimationFrame（请求动画帧）
  • CancelAnimationFrame（取消动画帧）
  • FireAnimationFrame（触发动画帧）
  • RequestIdleCallback（请求空闲回调）
  • CancelIdleCallback（取消空闲回调）
  • FireIdleCallback（触发空闲回调）
  • WebSocketCreate（创建WebSocket）
  • WebSocketSendHandshakeRequest（发送WebSocket握手请求）
  • WebSocketReceiveHandshakeResponse（接收WebSocket握手响应）
  • WebSocketDestroy（销毁WebSocket）
  • EmbedderCallback（嵌入式回调）
  • LatencyInfo（延迟信息）
  • GCCollectGarbage（收集垃圾）
  • CryptoDoEncrypt（加密操作）
  • CryptoDoEncryptReply（加密回复）
  • CryptoDoDecrypt（解密操作）
  • CryptoDoDecryptReply（解密回复）
  • CryptoDoDigest（摘要操作）
  • CryptoDoDigestReply（摘要回复）
  • CryptoDoSign（签名操作）
  • CryptoDoSignReply（签名回复）
  • CryptoDoVerify（验证操作）
  • CryptoDoVerifyReply（验证回复）

    • 这个类别中的事件是您预期的 - 脚本编译、函数调用、垃圾回收等。

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

    • Animation（动画）
    • RequestMainThreadFrame（请求主线程帧）
    • BeginFrame（开始帧）
  • BeginMainThreadFrame
  • 绘制帧开始
  • DrawFrame
  • 绘制帧
  • HitTest
  • 命中测试
  • ScheduleStyleRecalculation
  • 计划样式重新计算
  • RecalculateStyles
  • 重新计算样式
  • UpdateLayoutTree
  • 更新布局树
  • InvalidateLayout
  • 无效化布局
  • Layout
  • 布局
  • UpdateLayerTree
  • 更新层树
  • ScrollLayer
  • 滚动层
  • MarkFCP
  • 标记FCP
  • MarkFMP
  • 标记FMP
  • MarkLCPCandidate
  • 标记LCPCandidate

    • 我曾经很难理解“渲染”和“绘制”之间的区别，这篇SO文章帮助解释了它们之间的区别。简而言之，“渲染”类别涉及页面布局的内存计算。

    绘制：该类别包括以下事件。

    • PaintSetup
    • PaintImage
    • UpdateLayer
    • Paint
    • RasterTask
    • CompositeLayers
    • MarkFirstPaint
    • DecodeImage
    • ResizeImage

    “绘制”类别中的事件涉及将像素实际绘制在屏幕上。

    系统：该类别包括以下事件。

    • StreamingCompileScript
    • Task
    • Program

    空闲：该类别包括以下事件。

    • StreamingCompileScriptWaiting
    一个不清楚的事情是，在哪个类别中跟踪后台脚本编译事件。这个Chrome功能在这里提到，并在这个Akamai页面上进一步澄清。Scripting和System类别都有涉及到这个特性的事件。
    值得一提的是，Chrome似乎还有其他几个事件类别，但在DevTools中不可见。这些类别包括：
    - gpu - 包括以下事件： - GPUTask - async - 包括以下事件： - AsyncTask - experience - 包括以下事件： - LayoutShift
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接