Chrome DevTools-“性能"标签摘要 [英] Chrome DevTools - Performance Tab Summary
问题描述
在Chrome DevTools的性能"选项卡上，摘要"面板显示几种活动类别的时间-加载，脚本，渲染，绘画，系统，空闲.我似乎无法在DevTools文档中找到这些类别所代表的简要描述.我觉得我必须忽略一些明显的东西.
On the Performance tab in Chrome DevTools, the Summary panel shows the timings for several categories of activities - Loading, Scripting, Rendering, Painting, System, Idle. I can't seem to find a concise description in the DevTools documentation for what each of these categories represent. I feel like I have to be overlooking something obvious.
我发现这篇SO帖子描述了渲染"和绘画"之间的区别.我认为加载"类别仍然很模糊.这似乎与网络时间无关，因为我看到的加载"时间比我在网络"标签上看到的请求时间要短得多.
I found this SO post that describes the difference between Rendering and Painting. The Loading category is still pretty fuzzy in my mind. It doesn't seem to relate to network timings because the times that I see for Loading are significantly shorter than the times that I see for requests on the Network tab.
谁能指出我描述性能摘要类别的文档?
Can anyone point me to docs describing the Performance Summary categories?
推荐答案
@wOxxOm向我指出了源代码(非常感谢！).
@wOxxOm pointed me to the source code (much thanks!).
我对代码进行了粗略的检查，这是我对Chrome DevTools性能类别的摘要.
I did a cursory review of the code and here is my summary of the Chrome DevTools performance categories.
正在加载:此类别包括以下事件.
Loading: this category includes the following events.
- ParseHTML
- ParseAuthorStyleSheet
- FrameStartedLoading
- ResourceWillSendRequest
- ResourceSendRequest
- ResourceReceiveResponse
- ResourceFinish
- ResourceReceivedData
请注意，网络运行中"时间似乎未包含在此类别中.该类别包括设置网络呼叫的时间，但是网络呼叫本身的时间未包含在该类别中.您可以通过运行测试来验证这一点，在该测试中，您既可以在网络"选项卡上记录网络时间，又可以在性能"选项卡上记录性能时间.例如，从本地服务器下载页面时，性能"选项卡的加载时间为37毫秒.网络"选项卡显示已发出26个请求，其中10个请求由高速缓存满足，但其余请求耗时624毫秒.性能"选项卡上显示的37毫秒似乎是呼叫的设置，而网络"选项卡上的624毫秒似乎是实际的机上请求/响应时间.
Note that the network "in-flight" times don't appear to be included in this category. This category includes timings for setting up the network calls, but the time for the network call themselves aren't captured in the category. You can verify this by running a test in which you record both the network times on the Network tab and the performance times on the Performance tab. As an example, when downloading a page from a local server the Performance tab load time is 37 ms; the Network tab shows that 26 requests were made, of which 10 requests were satisfied by the cache, but the remaining requests took 624 ms. The 37 ms shown on the Performance tab appears to be the setup of the calls whereas the 624 ms on the Network tab appears to be the actual in-flight request/response times.
脚本:此类别包括以下事件.
Scripting: this category includes the following events.
- EventDispatch
- TimerInstall
- TimerRemove
- TimerFire
- XHRReadyStateChange
- XHRLoad
- CompileScript
- EvaluateScript
- CompileModule
- EvaluateModule
- StreamingCompileScriptParsing;
- WasmStreamFromResponseCallback
- WasmCompiledModule
- WasmCachedModule
- WasmModuleCacheHit
- WasmModuleCacheInvalid
- MarkLoad
- MarkDOMContent
- 时间戳记
- ConsoleTime
- UserTiming
- RunMicrotasks
- FunctionCall
- GCEvent
- MajorGC
- MinorGC
- JSFrame
- RequestAnimationFrame
- CancelAnimationFrame
- FireAnimationFrame
- RequestIdleCallback
- CancelIdleCallback
- FireIdleCallback
- WebSocketCreate
- WebSocketSendHandshakeRequest
- WebSocketReceiveHandshakeResponse
- WebSocketDestroy
- EmbedderCallback
- LatencyInfo
- GCCollectGarbage
- CryptoDoEncrypt
- CryptoDoEncryptReply
- CryptoDoDecrypt
- CryptoDoDecryptReply
- CryptoDoDigest
- CryptoDoDigestReply
- CryptoDoSign
- CryptoDoSignReply
- CryptoDoVerify
- CryptoDoVerifyReply
我认为您应该期望该类别中的事件-脚本编译，函数调用，垃圾回收等.
The events in this category are what I think you would expect - script compilation, function calls, garbage collection, etc.
渲染:此类别包括以下事件.
Rendering: this category includes the following events.
- 动画
- RequestMainThreadFrame
- BeginFrame
- BeginMainThreadFrame
- DrawFrame
- HitTest
- ScheduleStyle重新计算
- RecalculateStyles
- UpdateLayoutTree
- InvalidateLayout
- 布局
- UpdateLayerTree
- ScrollLayer
- MarkFCP
- MarkFMP
- MarkLCPCandidate
I previously had a hard time understanding the difference between "rendering" and "painting" and this SO post helped explain the difference. In short, the rendering category relates to the in-memory computation of the layout of the page.
绘画:此类别包括以下事件.
Painting: this category includes the following events.
- PaintSetup
- PaintImage
- UpdateLayer
- 绘画
- RasterTask
- CompositeLayers
- MarkFirstPaint
- DecodeImage
- ResizeImage
绘画"类别中的事件与实际绘画屏幕上的像素有关.
The events in the Painting category pertain to actually painting the pixels on the screen.
系统:此类别包括以下事件.
System: this category includes the following events.
- StreamingCompileScript
- 任务
- 程序
空闲:此类别包括以下事件.
Idle: this category includes the following events.
- StreamingCompileScriptWaiting
我不清楚的一件事是跟踪后台脚本编译事件的类别.在此处中提到了此Chrome功能，并在
One thing that isn't clear to me is the category in which background script compilation events are tracked. This Chrome feature is mentioned here and further clarified on this Akamai page. Both the Scripting and the System category have events that seem to allude to this feature.
值得一提的是，Chrome浏览器似乎还有其他一些事件类别，但在DevTools中看不到.这些类别是:
It's worth mentioning that Chrome appears to have a few other event categories that it tracks, but aren't visible in the DevTools. Those categories are:
gpu -此类别包括以下事件.
gpu - this category includes the following events.
- GPUTask
异步-此类别包括以下事件.
async - this category includes the following events.
- AsyncTask
经验-此类别包括以下事件.
experience - this category includes the following events.
- LayoutShift
这篇关于Chrome DevTools-“性能"标签摘要的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
