HTML page life cycle

Question

I am trying to understand the life cycle of an HTML page. I can not find any good resources on the Internet. So I opened the f12 tool, i.e. And he did some experiments on his own. Based on this, I made several conclusions, can someone tell me if I am right?

My observations

1> When a page is requested via HTTP, the browser first receives the HTML skeleton. Nothing is displayed to the user at this time.

2> Depending on what is in the HTML skeleton, additional requests are allocated for resources (external JavaScript, css, images, etc.)

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

4> After the HTTP status code for CSS and JavaScript is received, only then will the browser begin to load the document from top to bottom, executing all the built-in JavaScripts that it encounters on the way.

5> If the inline JavaScript above refers to the HTML element below, JavaScript does not work.

6> Once the entire document finishes loading, the jquery $ (document) .ready event will occur. (That is, if I use jQuery)

7> The browser does not wait for resources other than scripts and css, so resources, such as images, can be loaded later after the page is displayed to the user.

Answer 1

You pretty much understood that. But it depends on the code (especially points 5, 6 and 7). For example, if the JS at the top is within $(document).ready , this will not work.

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