Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gaps in FireBug waterfall chart

Tags:

When testing performance of various web pages on my web application I noticed that there are some gaps in net tab (waterfall chart) in firebug. In some cases these may take up half of the time for the whole request.

What usually causes these gaps and how can they be removed?

enter image description here

like image 517
Eric P Avatar asked Feb 14 '11 10:02

Eric P


3 Answers

Jan Odvarko who worked on Firebug explains it himself here:

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

He mentions the gaps in comment #18:

"These gaps represent a time when no requests happened, this can be e.g. due to a javascript execution on the page, which blocks page download or page rendering, CSS resolving, etc."

like image 184
Smily Avatar answered Oct 01 '22 08:10

Smily


The main reason this happens is for files that are loaded by scripts and CSS files.

  • For example: CSS, background images won't start loading until a small delay after the CSS file that links to them loads.

  • Many JS libraries also load images, CSS, and/or other files. These loads won't start until the calling JS is loaded, plus a small processing delay.

  • Libraries, or inline JS, may also fire off loads at the DOMContentLoaded event (the purple line) or the load event (red line).

  • Finally, obviously, JS can execute AJAX that fires after any manner of delays/intervals.

like image 22
Brock Adams Avatar answered Oct 01 '22 07:10

Brock Adams


The most obvious reason I can think of (other than a bug in Firebug) is that you've got the filter switched to only show a subset of requests. For example, you may only be showing Javascript files, etc.

Your screenshot doesn't include the filters or the filenames, so I can't tell that for sure, but that seems like the most obvious answer.

Immediately above the panel in your screenshot is a block of filters. Make sure you've got the "All" option selected. If you have anything else selected, then gaps are to be expected.

The other reason would be if you have some page elements being fetched separately from the initial load, eg via Ajax or deferred loading. These may be loaded very soon after the page has loaded, but not immediately, leading to gaps in your timeline.

Hope that helps.

like image 41
Spudley Avatar answered Oct 01 '22 06:10

Spudley