Below, you’ll see a snapshot of Firebug’s Net Panel/Tab after I clicked a submit button on a form in an ASP.NET web application, to the time the response came back from a full page postback. (Actually I don’t know when Firebug’s NET panel timeline stops… I’m guessing it’s when the page finally renders… please tell me if you know.)
I’d like to understand what each interval below means (1-10). If each vertical line means something different, then just say “1-2” or “2-3” to indicate the vertical line. I’m noticing that the times from the itemized URL lines in the timeline don’t match the total time. Where did this time go? How can I pinpoint the slowness?
My goal is to find out how I can speed up this page. But in the mean time, I’d like to understand what’s happening in the page first. I’m a bit concerned about #7 and #10. That’s what I’m primarily trying to figure out right now.
FYI: The image is very small in the thread’s question, so if you open the image in a new tab (or window) it will be easier to see.
If I haven’t provided enough information, please ask.
==================
9/20/2011 update @ 12:49am
Removed the iFrame, but that did not help performance.
OK, in the first image you’ve got persist turned on which means Firebug will show the requests for more the one page i.e. doesn’t clear down one reload (http://getfirebug.com/wiki/index.php/Net_Panel).
8 is the DOMContentLoaded event being fired which is the point the browser can start rendering the page
6 is the onload event firing
(Not sure what the other intermediate lines are)
7 & 9 are the UI thread being blocked by the parsing / execution of javascript
Have a read of this Chapter from @souders book on blocking Javascript for an explanation (http://books.google.co.uk/books?id=E7p-07kNfXYC&lpg=PR15&ots=UMcnSGjhOr&dq=javascript%20blocking%20souders&pg=PA27#v=onepage&q=javascript%20blocking%20souders&f=false)