devtools时间的空虚意味着什么？ [英] What the emptiness mean in devtools timings?

问题描述

检查此图片的时间以进行网页抓取。

开始时灰色表示暂停时间，绿色表示等待时间，蓝色表示接收数据。中间还有一个空洞的，眩目的虚无......这是什么？

该图片来自Google Chrome 43，正常devtools。

解决方案

我已经为铬错误写了一篇广泛的解释：问题476749：DevTools：[网络]在请求前解释空白栏。

要点被推迟了，因为它被认为比脚本/样式的优先级低（例如，图像）

当我们等待一个即将释放的可用TCP套接字时，该请求被搁置。

请求被搁置，因为浏览器每台主机只能连接6个连接。

创建磁盘缓存条目花费的时间（通常非常快）

您可以右键单击标题以打开Connecti on ID来查看是否有不同的请求共享相同的TCP连接。

但是从上面的屏幕截图可以看到，预加载扫描程序确定了页面所需的许多脚本，样式和图像。它很快启动了样式和脚本，并将图像排队等待稍后完成。由于每个主机规则有6个连接，它们被延迟。

Check this image with timings for a web page fetch.

There is gray at the beginning for stalled time, the green for waiting time, and the blue for receiving data. There is also a hollow, glaring nothingness in the middle.... what is that?

The image is from Google Chrome 43, normal devtools.

解决方案

I've written up an extensive explanation in the chromium bug for it: Issue 476749: DevTools: [network] explain empty bars preceeding request..

Here's the gist, empty bar time is usually one of a few things

• The request was postponed because it's considered lower priority than scripts/styles (e.g. images)
• The request was put on hold while we wait for an available TCP socket that's about to free up
• The request was put on hold because the browser only does 6 connections per host.
• Time spent making disk cache entries (typically very quick)

You can right click the headers to turn on "Connection ID" to see if different requests are sharing the same TCP connection. WebPageTest's connection view can also help with that.

But from the screenshot above, it appears the preload-scanner identified many scripts, styles, and images necessary for the page. It quickly started the styles and scripts and queued up images to be done later. They were delayed because of the 6 connections per host rule.

这篇关于devtools时间的空虚意味着什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！