Every time when you hit any URL in address bar lots of question comes to your mind like “what is lifecycle of the web page”, “how does it work”, “what is the exact process to compile the web page”, “Is there any process or instruction behind all of the event” etc.. Let’s find out the answers.
What is lifecycle of the web page?
When any page is loaded in the browser. The browser creates a DOM ( document object model) of the page like below.
<!DOCTYPE html> <html> <head> <title>Lifecycle of webpage</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link href="/css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="Top-Div"> <ul id="first-Child"> <li id="first-child-Of-UL"></li> <li id="sibling-Of-LI"></li> </ul> <ul id="second-Child-also-sibling-of-ul"> <li id="first-child-Of-UL"></li> <li id="sibling-Of-LI"></li> </ul> </div> </body> </html>
Above is the example of the DOM. let’s compile it line by line.
- <!DOCTYPE html> – Setting the document type definition (DTD). Full reference https://en.wikipedia.org/wiki/Document_type_definition
- <html> Tag – This is the root tag of HTML document.
- <head> Tag – this is a container for all the head elements. it contains following tags
- <link> tag – It will call external style sheets.
- <body> tag – It define the document’s body. all the tag like h1 to h6, p, ul, ol, table, form etc tag will define in the body tag.
- <div id=”Top-Div”> – This is the main div after the body. It contains two nodes (UL) directly.
How page building work.
- User enter the URL in browser
- Browser generate the request and send to the server
- Server sends all the response to the browser
- Browser parsing the DOM