Lifecycle of Web page
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 user enters the URL in the address bar browser generates the request and send to concern server. The server sends the response according to the request. For example, if you hit “http://www.developnew.com” it will send some response to you but if you hit any wrong URL like “http://nodomainfound.com/” then you see nothing in the response. (how to check response – open “developer tools or firebug” select the network tab. there you can see all the response). The browser parses all the HTML, CSS and javascript and builds the web page. Browser compiles web page line by line.
DOM
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
- meta
- title
- link
- script
- style
- base
- noscript
- <script> Tag – It will hit “googleapis.com” CDN server and get the response in the javascript. CDN stands for Content delivery network. With a CDN, users from a European point of origin will be able to download your site’s static content faster from a closer server node. A global CDN would allow users from a European point of origin to download static content from a closer source. … This reduces latency and provides a faster loading of your website. Full reference – Why use a CDN
- <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.
Page building
When DOM is load, there is another process execute simultaneously that is javascript code. From the javascript code, you can modify, delete and update any of the HTML node in the page.
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
- Browser parse Javascript – attaching event and executing other function, Javascript code will not execute and the browser will move to next node. if any javascript error occurs.
Event handling
Javascript is single threaded so it means only single event handler can be executed at a time. so whenever any event occurs, browser check, is there any event is associated with that or not. if yes then browser call that event.
About Author
Web Master
The WebMaster of the developnew.com