title: Chrome Developer Tools: How to Read the Network Panel?
body: <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/ejvhD.png" alt="enter image description here"></p>
  
  <p>Then if I select the performance file I will have this information:</p>
  
  <p><img src="https://i.stack.imgur.com/ppZjE.png" alt="enter image description here"></p>
  
  <p>My question is this:</p>
  
  <ol>
  <li><em>What is the meaning of DNS Lookup, Connecting, Sending, Waiting and Receving? What is happening between the server, network and browser at each stage?</em> </li>
  <li><em>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?</em></li>
  </ol>