title: Sequence in which HTML page loads?
body: <p>What is the sequence in which a HTML page loads. Please see below a basic HTML outline -</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="css/sheet1.css"&gt;
      &lt;link rel="stylesheet" href="css/sheet2.css"
      &lt;script src="scripts/take1.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/take2.js"&gt;&lt;/script&gt;
  &lt;head&gt;
  &lt;body&gt;
  &lt;button&gt;button1&lt;/button&gt;
  &lt;img src = "HQ1.jpg" /&gt;
  &lt;img src = "HQ2.jpg" /&gt;
  &lt;button&gt;button2&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What i know - (please correct me if i am not right)</p>
  
  <p>head section is loaded first.
  and then body section loads.</p>
  
  <p>My questions -<br>
  1. Does body section begin to load only once head section is loaded completely?<br>
  2. Does css sheet1 load completely, and then only sheet2 and JS file start loading?<br>
  3. Does CSS files load in parallel? same with JS files..? or does CSS and JS file together load in parallel?<br>
  4. Since HQ* images are big files, it takes time to load. does button2 load and show up in page only once HQ1 and HQ2 is loaded completely?<br>
  5. Does downloading of HQ1 and HQ2 happen in parallel, or is it synchronous which is first HQ1 and then HQ2?  </p>