What do the colored bars in the Firefox net panel represent?

Question

In the firefox developer tools, under the "Net" panel, resources that are loaded have their load time split into different colors/categories. These are:

• DNS Lookup
• Connecting
• Blocking
• Sending
• Waiting
• Receiving

What do each of these represent, and more specifically, does any of them accurately represent the amount of time that the server is thinking (accessing the database, running algorithms, etc)?

Thanks.

Answer 1

You couldn't accurately determine what the server is doing as such, I'm afraid.

You can discount most of them except Waiting, however, as the rest occur before and after the server handles your request. What it actually does while you wait will be a 'black box'.

There may be some asynchronous operations taking place during Sending and Receiving, so again it's hard to be accurate but you can get a ballpark figure of the time the server is working and the time the request spends travelling back and forth.

EDIT

Rough Definitions:

DNS Lookup: Translating the web address into a destination IP address by using a DNS server Connecting: Establishing a connection with the web server

Blocking: Previously known as 'queueing', this is explained in more detail here

Sending: Sending your HTTP Request to the server

Waiting: Waiting for a response from the server - this is where it's probably doing all the work

Receiving: Getting the HTTP response back from the server

Answer 2

The firebug wiki also explains these (see the Timeline section).

• Blocking Time spent in a browser queue waiting for a network connection (formerly called Queueing). For SSL connections this includes the SSL Handshake and the OCSP validation step.
• DNS Lookup DNS resolution time
• Connection Elapsed time required to create a TCP connection
• Waiting Waiting for a response from the server
• Receiving Time required to read the entire response from the server (and/or time required to read from cache)
• 'DOMContentLoaded' (event) Point in time when DOMContentLoaded event was fired (since the beginning of the request, can be negative if the request has been started after the event)
• 'load' (event) Point in time when the page load event was fired (since the beginning of the request, can be negative if the request has been started after the event)

Answer 3

There's a pretty good article with time charts and a protocol level explanation of what's happening at each stage here.I found it pretty helpful as they also visually demonstrate the impact of using persistent and parallel connections versus serial connections.