What is Web?
The web is comprised of 3 protocols:
Simply understood as web address.
It is a reference to a web resource that specifies its location on the web.
In other words it locates the resource, like locally in our computer we can have index.html file in the following path. (/Users/portfoliowebsite/index.html)
Example: http://www.example.com/index.html
It is a communication protocol using which client-server (user -remote computer) response is done. Using this protocol hypertext is transferred from server to browser.
It is the markup language for creating web-pages and web applications.
Along with CSS and JavaScript they perform what a webpage visually looks like.
How does browser transform HTML into web pages?
Web browsers (firefox, chrome, safari etc) receives HTML documents from a web server or from local storage and renders them into web pages.
- How does browser render web page?
The Rendering Engine is responsible for displaying the content from html. Let’s examine the following index.html for rendering.
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>It parses HTML and CSS and creates different model object.
- The DOM (Document Object Model) is formed from the HTML.
2. The Styles are loaded from CSS into CSSOM(CSS Object Model).
3. A rendering tree is created which reflects the DOM structure. The browser traverses the DOM tree and matches each element with style from CSSOM tree. The tree is constructed using an algorithm.
4. For each render tree element, layout are created with the geometry(layout dimensions).
5. Finally, the layout are displayed in browser window, a process called “painting”.
References:
- What is hypertext? ~ Wiki
- Client-Server Architecture ~ Wiki
- What is HTML? ~ Wiki
- What is markup language? ~ Wiki
- What is DOM? ~ developer.mozilla
- How do browsers render HTML-CSS? ~ Quora
- How is Object Model constructed ~ developers.google
- How is rendering done in browser? ~ developers.google
- How does browsers work? ~ html5rocks.com
- The tree construction algorithm ~ html5rocks.com
