Menu
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.
449
The browser loads the html (DOM) at first. The browser starts to load the external resources from top to bottom, line by line. If a <script> is met, the loading will be blocked and wait until the JS file is loaded and executed and then continue.
There are three different phases during lifecycle of an JavaScript event. Capturing Phase. Target Phase. Bubbling Phase.
After you have a basic understanding of javascript, you can detect when a page has loaded by using the window. onload event. window. onload = function() { addPageContents(); //example function call. }
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.
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
