Chrome DevTools - 时间选项卡中的“排队”是啥意思?

     2023-02-27     204

关键词:

【中文标题】Chrome DevTools - 时间选项卡中的“排队”是啥意思?【英文标题】:Chrome DevTools - what does 'Queueing' means in the Timing tab?Chrome DevTools - 时间选项卡中的“排队”是什么意思? 【发布时间】:2016-03-06 17:44:43 【问题描述】:

在 DevTools 的 Timing 选项卡中,您可以看到以下状态:

_

除了“排队”之外,所有状态都在 DevTools 文档中进行了说明。你知道浏览器在排队阶段做什么吗?我们在说什么队列?

谢谢

此外,排队似乎可以在连接设置开始时发生,也可以在“请求/响应”阶段开始时发生?

【问题讨论】:

@paul-irish 的answer on emptiness 应该涵盖您正在寻找的信息。 好的,谢谢。信息量很大,是不是意味着可以在“Stalled”和“Request sent”之前进行排队? 是的,队列发生的原因有很多,并且可能在请求生命周期的多个点发生。 What the emptiness mean in devtools timings?的可能重复 【参考方案1】:

发件人:https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing

排队

如果请求排队,则表明:

请求被渲染引擎推迟,因为它的优先级低于关键资源(例如脚本/样式)。这通常发生在图片上。 请求被搁置以等待即将释放的不可用 TCP 套接字。 请求被搁置,因为浏览器仅允许 HTTP 1 上每个源的六个 TCP 连接。 创建磁盘缓存条目所花费的时间(通常非常快。)

@cyptus 评论更新:

使用 chrome v76,网络选项卡将隐藏 CORS 预检 (OPTIONS) 请求。触发此 CORS 的请求将包括(不可见的)OPTIONS 请求在排队时间中所用的时间。

@tamilsweet 评论更新:

要显示 CORS 预检,请关注 Chrome not showing OPTIONS requests in Network tab

【讨论】:

使用 chrome v76,网络选项卡将隐藏 CORS 预检 (OPTIONS) 请求。触发此 CORS 的请求将包括(不可见的)OPTIONS 请求在排队时间中所用的时间。 要显示 CORS 预检,请关注 ***.com/questions/57410051/…【参考方案2】:

另一种可能是有一个新的服务人员正在尝试安装或激活。在您的页面访问中保持 service worker url 稳定。

【讨论】:

可以过滤 chrome devtools 网络选项卡中记录的请求吗?

】可以过滤chromedevtools网络选项卡中记录的请求吗?【英文标题】:Canloggedrequestsinthechromedevtoolsnetworktabbefiltered?【发布时间】:2013-01-1308:18:30【问题描述】:我在我的应用程序中使用MVCMiniProfiler和GoogleAnalytics。这些正在生成对服... 查看详情

redux devtools 不在扩展 devtools 选项卡中显示状态

】reduxdevtools不在扩展devtools选项卡中显示状态【英文标题】:reduxdevtoolsdoesnotshowstateinextensiondevtoolstab【发布时间】:2018-05-2018:20:40【问题描述】:我正在使用react和redux编写一个chrome扩展。该扩展在chromedevtools中有自己的选项卡。... 查看详情

如何在 Chrome DevTools 检查器的样式和计算选项卡中使用多个过滤器?

】如何在ChromeDevTools检查器的样式和计算选项卡中使用多个过滤器?【英文标题】:HowdoesoneusemultiplefiltersinthestylesandcomputedtabsoftheChromeDevToolsinspector?【发布时间】:2018-05-0120:19:27【问题描述】:在ChromeDevTools检查器的Styles和Computed... 查看详情

有没有办法在 Chrome DevTools 中调试 Apollo GraphQL 订阅?

】有没有办法在ChromeDevTools中调试ApolloGraphQL订阅?【英文标题】:IsthereawaytodebugApolloGraphQLsubscriptionsinChromeDevTools?【发布时间】:2020-09-1504:25:24【问题描述】:在ChromeDevTools的Network选项卡中,我只能找到GraphQL查询和突变请求:在... 查看详情

chrome背景选项卡中的自动播放声音

】chrome背景选项卡中的自动播放声音【英文标题】:Autoplaysoundinchromebackgroundtab【发布时间】:2016-06-0205:54:05【问题描述】:我有一个使用音频通知的HTML5游戏。当用户通过匹配来搜索其他玩家时,他们经常更改标签来做其他事情... 查看详情

另一个 Chrome 选项卡中的 Google Colab TensorBoard

】另一个Chrome选项卡中的GoogleColabTensorBoard【英文标题】:GoogleColabTensorBoardinanotherChromeTab【发布时间】:2020-06-2610:09:15【问题描述】:我正在阅读PyTorch教程,目前正在使用TensorBoard教程。通过研究,我已经能够让它内联并通过另... 查看详情

没有为深层链接捕获 Chrome 自定义选项卡中的重定向

】没有为深层链接捕获Chrome自定义选项卡中的重定向【英文标题】:RedirectinChromeCustomtabisnotcapturedfordeeplink【发布时间】:2021-12-2410:35:18【问题描述】:我想捕获发生在Chrome自定义选项卡中的重定向,以确保用户停留在本机移动... 查看详情

chrome 扩展:如何将某个选项卡中的所有音频静音

】chrome扩展:如何将某个选项卡中的所有音频静音【英文标题】:chromeextension:howtomuteallaudiofromcertaintab【发布时间】:2014-09-1416:57:14【问题描述】:我一直在chrome扩展参考中搜索一些东西,以找到任何可以让我操纵标签的音频级... 查看详情

如何使用 Selenium 4 (devTools) 从网络选项卡获取响应正文

】如何使用Selenium4(devTools)从网络选项卡获取响应正文【英文标题】:HowtogettheresponsebodyfromnetworktabusingSelenium4(devTools)【发布时间】:2021-10-1014:19:18【问题描述】:我在selenium4中使用devTools从网络选项卡中检索响应。当我获取url、... 查看详情

Android 将 html 数据加载到 chrome 自定义选项卡中

】Android将html数据加载到chrome自定义选项卡中【英文标题】:Androidloadhtmldataintochromecustomtabs【发布时间】:2017-03-2522:15:43【问题描述】:我想在我的应用中使用chrome自定义标签。我找到了如何将url中的数据加载到选项卡中,但我... 查看详情

chrome调试之workspaces

可通过workspaces来编辑本地文件workspaces是ChromeDevTools的一个强大功能,这使DevTools变成了一个真正的IDE。Workspaces会将Sources选项卡中的文件和本地项目中的文件进行匹配,所以你可以直接编辑和保存,而不必复制/粘贴外部改变的文... 查看详情

chrome调试器:单击控制台中的异常链接会在新选项卡中打开文件,而不是交叉链接到源文件

】chrome调试器:单击控制台中的异常链接会在新选项卡中打开文件,而不是交叉链接到源文件【英文标题】:chromedebugger:clickingexceptionlinkinconsoleopensfileinnewtabinsteadofcross-linkingintosourcefile【发布时间】:2015-04-2405:42:03【问题描述】... 查看详情

在 Chrome DevTools 中测量整个页面大小

】在ChromeDevTools中测量整个页面大小【英文标题】:MeasurefullpagesizeinChromeDevTools【发布时间】:2016-11-0910:45:06【问题描述】:我已经在谷歌上搜索了一段时间,但没有找到任何明确的解决方案。我想测量整个网页的重量/大小(所... 查看详情

Chrome DevTools 不显示 .js 文件

】ChromeDevTools不显示.js文件【英文标题】:ChromeDevToolsdonotshow.jsfiles【发布时间】:2020-04-1723:45:32【问题描述】:我正在开发一个小型Angular应用程序,并尝试在ChromeDevTools中对其进行调试。但是,我在那里只能看到.ts文件。如何查... 查看详情

源地图在 Chrome 网络选项卡中不可见

】源地图在Chrome网络选项卡中不可见【英文标题】:SourcemapisnotvisibleatChromenetworktab【发布时间】:2015-10-1000:45:35【问题描述】:在GoogleChrome更新之前,我在网络选项卡上的ChromeDevtools中看到了源映射文件。现在,更新到43.0.2357.134... 查看详情

Chrome >=24 - 如何将 devtools 停靠在右侧?

】Chrome>=24-如何将devtools停靠在右侧?【英文标题】:Chrome>=24-howtodockdevtoolstotheright?【发布时间】:2013-01-0111:01:17【问题描述】:我喜欢将开发工具停靠在右侧。我记得当我意识到我不再需要手动分屏和定位窗口时,我第一... 查看详情

Chrome >=24 - 如何将 devtools 停靠在右侧?

】Chrome>=24-如何将devtools停靠在右侧?【英文标题】:Chrome>=24-howtodockdevtoolstotheright?【发布时间】:2013-01-0111:01:17【问题描述】:我喜欢将开发工具停靠在右侧。我记得当我意识到我不再需要手动分屏和定位窗口时,我第一... 查看详情

Chrome 无头打印到 PDF 中的其他选项

...pdf。但是,pdf中存在页眉和页脚。我发现这个选项已经在Devtools中实现了。https://chromedevtools.github.io/devtool 查看详情