In this article I explain the steps your browser takes to convert HTML, CSS, and JavaScript into a working website you can interact with.
• Receiving the HTML document and Constructing the DOM:
• Parsing The HTML
In this step the browser receives the HTML file and changes its format into a readable form for the user to understand.
<html>
<head>
<script src="index.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div>
<p>Sample 1</p>
<p><span class="text">Sample 2</span></p>
</div>
</body>
</html>
• Fetching External Files:
<script src="index.js"></script>
<link rel="stylesheet" href="style.css">
• Applying CSS:
body {
font-size: 5px;
}
p {
font-weight: bolder;
}
.text {
color: red;
}
CSS has something called the cascade. The cascade is how the browser determines what styles are applied to an element.
This is important because the browser has to recursively go through the CSS tree structure and determine the styles that affect a particular element.
• The Render Tree:
• Layout:
• Painting:
• JavaScript:
Most modern websites contain JavaScript now so the browser will have to fetch its files and execute it after rendering the page. JavaScript adds interactivity to the page to enhance user experience. It can trigger animations and fetch data. JavaScript can also remove and add elements from the DOM tree, and you may modify the CSSOM properties of an element via JavaScript as well.
In conclusion, the process of how a browser renders a webpage is complex, involving different components within the browser. From parsing and constructing the DOM to applying CSS styles, calculating layouts, and executing JavaScript, each step plays a vital role in transforming raw code into the visually appealing and interactive web pages we interact with daily
Top comments (0)