HTML Page Life Cycle

Question

I am trying to understand the lifecycle of an HTML page. I cannot find any good resources on it online. So I opened up the f12 tool in ie and did some experiments on my own. Based on that I have drawn some conclusions, can someone please tell me if I am right?

My observation

1>When a page is requested over HTTP first the HTML skeleton is received by the browser. At this time nothing is displayed to the user.

2>Based on what is in the HTML skeleton some more additional requests are sent out for the resources (external JavaScript,css,images etc)

3>The browser waits until it receives a HTTP status code for the script and css resources.

4>Once the HTTP status code for the css and JavaScript is received, only then the browser starts loading the document top to bottom, executing whatever embedded JavaScript it encounters on the way.

5>If the embedded JavaScript on the top refers to an HTML element on the bottom, the JavaScript will fail.

6>Once the entire document finishes loading, then the jquery event $(document).ready is fired. (That is if I am using JQuery)

7>The browser does not wait for resources other than scripts and css, so resources like images could get loaded later after the page is displayed to the user.

Answer 1

You pretty much got it correct. But it depends upon the code (especially point 5, 6 and 7). For example, if the JS at the top is within $(document).ready, then it will not fail.

Secondly, I would prefer Firefox F12 or Chrome F12 over IE. They are much much detailed and developer friendly. See the NET tab in them to understand further. It will show you the exact order in which the resources are called and loaded, which is what you were mainly looking for.