FireBug瀑布图中的差距

Question

在我的网络应用程序上测试各种网页的性能时，我注意到firebug中的网络标签（瀑布图）存在一些空白。在某些情况下，这些可能占用整个请求的一半时间。

通常会导致这些差距的原因以及如何将其删除？

Answer 1

在Firebug工作的Jan Odvarko在这里解释了这一点：

http://www.softwareishard.com/blog/firebug/firebug-net-panel-timings/

他提到评论＃18中的差距：

“这些间隙代表没有请求发生的时间，这可能是由于页面上的javascript执行，阻止了页面下载或页面呈现，CSS解析等等。”

Answer 2

发生这种情况的主要原因是脚本和CSS文件加载的文件。

• 例如：CSS，背景图片不会开始加载，直到链接到它们的CSS文件加载后的一小段延迟。

• 许多JS库还会加载图像，CSS和/或其他文件。在加载调用JS之前，这些加载不会启动，加上一小段处理延迟。

• 库或内联JS也可以在DOMContentLoaded事件（紫色线）或load事件（红线）处启动负载。

• 最后，显然，JS可以执行任何延迟/间隔后触发的AJAX。

Answer 3

我能想到的最明显的原因（除了Firebug中的错误）是您已将过滤器切换为仅显示请求的子集。例如，您可能只显示Javascript文件等。

您的屏幕截图不包含过滤器或文件名，所以我无法确定，但这似乎是最明显的答案。

屏幕截图中的面板上方是一个过滤器块。确保您已选择“全部”选项。如果您还有其他选择，那么就会出现差距。

另一个原因是，如果您有一些页面元素与初始加载分开获取，例如通过Ajax或延迟加载。这些可能会在页面加载后很快加载，但不会立即加载，导致时间线出现空白。

希望有所帮助。