Chrome Developer Tools: How to Read the Network Panel?

Question

I am trying to make sense of the Chrome Developer Tools when I run performence tests on my websites. If you select Network on the tools meny it will look like this:

Then if I select the performance file I will have this information:

My question is this:

1. What is the meaning of DNS Lookup, Connecting, Sending, Waiting and Receving? What is happening between the server, network and browser at each stage?
2. On the first image, the red line reads "Load event fired" and the blue one reads "DOMContent event fired". What is the meaning of this and why is it the DOMContent event is fired after all the content has been loaded?

Answer 1

Answering part II:

The Blue line (DOM content loaded event):
It happens when the browser finished parsing the main document.

The Red line (Load event):
It happens when the browser finished retrieving all the resources required by the main document.

After the red line: Here you will see loading of asynchronous and cached resources required by the main document and by other resources.