dni*_*els 3 google-chrome google-chrome-devtools
在 Chrome DevTools 的 Performance 选项卡上,Summary 面板显示了几类活动的时间——加载、脚本、渲染、绘画、系统、空闲。我似乎无法在 DevTools 文档中找到关于这些类别中的每一个代表什么的简明描述。我觉得我必须忽略一些明显的东西。
我发现这篇 SO post描述了渲染和绘画之间的区别。Loading 类别在我的脑海中仍然很模糊。它似乎与网络时间无关,因为我看到的加载时间明显短于我在网络选项卡上看到的请求时间。
任何人都可以指向我描述性能摘要类别的文档吗?
@wOxxOm 向我指出了源代码(非常感谢!)。
我粗略地查看了代码,这里是我对 Chrome DevTools 性能类别的总结。
Loading:此类别包括以下事件。
请注意,网络“飞行中”时间似乎不包含在此类别中。此类别包括设置网络呼叫的时间,但网络呼叫本身的时间未在类别中捕获。您可以通过运行一个测试来验证这一点,在该测试中您记录了 Network 选项卡上的网络时间和 Performance 选项卡上的性能时间。例如,从本地服务器下载页面时,性能选项卡加载时间为 37 毫秒;Network 选项卡显示发出了 26 个请求,其中缓存满足了 10 个请求,但其余请求花费了 624 毫秒。Performance 选项卡上显示的 37 ms 似乎是调用的设置,而 Network 选项卡上的 624 ms 似乎是实际进行中的请求/响应时间。
脚本:此类别包括以下事件。
这个类别中的事件是我认为您所期望的 - 脚本编译、函数调用、垃圾收集等。
渲染:此类别包括以下事件。
我以前很难理解“渲染”和“绘画”之间的区别,这篇文章帮助解释了这种区别。简而言之,渲染类别与页面布局的内存计算有关。
绘画:此类别包括以下事件。
绘画类别中的事件与实际在屏幕上绘制像素有关。
系统:此类别包括以下事件。
空闲:此类别包括以下事件。
我不清楚的一件事是跟踪后台脚本编译事件的类别。此 Chrome 功能在此处提及并在此 Akamai 页面上进一步阐明。Scripting 和 System 类别都有似乎暗示此功能的事件。
值得一提的是,Chrome 似乎有一些其他事件类别可以跟踪,但在 DevTools 中不可见。这些类别是:
gpu - 此类别包括以下事件。
异步- 此类别包括以下事件。
体验- 此类别包括以下事件。
| 归档时间: |
|
| 查看次数: |
1023 次 |
| 最近记录: |