<![CDATA[Stories by Bishal kumar on Medium]]> https://medium.com/@kbishal922?source=rss-a7010c630858------2 https://cdn-images-1.medium.com/fit/c/150/150/0*vJV68AKRbCk0OTdM Stories by Bishal kumar on Medium https://medium.com/@kbishal922?source=rss-a7010c630858------2 Medium Sun, 24 May 2026 02:26:33 GMT <![CDATA[Decoding HTML Script Placement: Async and Defer Explained]]> https://medium.com/@kbishal922/decoding-html-script-placement-async-and-defer-explained-8a24d99c0453?source=rss-a7010c630858------2 https://medium.com/p/8a24d99c0453 Fri, 26 Jan 2024 07:58:15 GMT 2024-01-27T16:35:23.135Z Hey, hope you like my first article on Medium and commented on your suggestions, if you haven’t view I request you to go and read it because it’s very important to know about how the HTML & CSS file is read by the browser and you will find it very interesting about it.

Ok, now it is time to know more about JS. Let’s go … 😎

1. <script> tag in header tag

  • When the HTML parsing is in process and as soon as it encounters the script tag then the HTML parsing will stop and the downloading of the script file continues as soon as it is downloaded then it will start executing it.
<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
    <style>
      .common {
        width: 200px;
        height: 60px;
        margin: 20px;
        background: rgba(0, 0, 255, 1);
        border-radius: 15px;
        font-size: large;
        color: white;
      }
    </style>
    <script>
      const btn1 = document.getElementById('btn1');
      btn1.addEventListener('click', function (e) {
        alert('Btn1 is pressed');
      });
    </script>
  </head>
  <body>
    <button id="btn1" class="common">Button1</button>
  </body>
</html>
  • The problem with this scenario is that in vanilla javascript, JS can manipulate the DOM by changing in appearance, hiding the element create an element. So, while executing the JS file it will through an error like the one below:-

2. <script> tag with async attribute

  • The advantage of using this approach is that when the script tag is encountered then it will download the js file asynchronously along with HTML parsing but as soon as the file is downloaded it will stop the HTML parsing and start the execution of the js file.
  • Again, it arises the same problem as same as the above case but the difference with the above case was asynchronously downloading the js file. But, it is useful if we are calling API because it reduces the time for fetching the data. After all, this process can execute asynchronously.

3. <script> tag with defer attribute

  • The approach is the same as with the async attribute but the difference is when the js file is downloaded it will not start executing the file rather it will wait for the HTML parsing to complete and then after the execution of js will continue.

I know that it is a bit confusing though theoretically, so I came up with the diagram shown below, which will help you to understand the things which is explained above.

Hope you understand the problem that I’m trying to explain and please provide your suggestions so that I can improve and prepare for more interesting topics.

Happy Learning📝, Happy coding 👨‍💻

Thank you

Bishal Kumar Saha

]]> <![CDATA[Demystifying Browser Rendering: A Deep Dive into HTML and CSS.]]> https://medium.com/@kbishal922/demystifying-browser-rendering-a-deep-dive-into-html-and-css-c944a4503c09?source=rss-a7010c630858------2 https://medium.com/p/c944a4503c09 Sun, 21 Jan 2024 12:51:39 GMT 2024-01-21T12:51:39.753Z The purpose of writing this article is to explain how the inside of the browser works.

I know that very few people or resources are available on this topic, and I will try to explain it to the best of my knowledge. I would appreciate your feedback, whether it’s related to correcting any mistakes I may have made or anything else.

Ok, let's start 3…2…1…Go 🙂

What is a Web Browser?

A web browser is an application for accessing websites and the internet. For more details, please refer to this link.

The block diagram of a web browser typically consists of the following components:

  • User Interface: This component allows users to interact with the browser and navigate websites.
  • Rendering Engine: It interprets HTML, CSS, and JavaScript code to display web content correctly.
  • Networking: This component handles network requests and responses, allowing the browser to retrieve web resources.
  • Browser Engine: It coordinates the different components of the browser and manages their interactions.
  • JavaScript Engine: This engine interprets and executes JavaScript code on web pages.
  • Data Storage: It includes caches, cookies, and local storage, which store website data to improve performance and user experience.
Block diagram of web browser.
Block diagram of a web browser.

As we know, data is sent over the internet in packets sized in bytes. So, when we attempt to open an HTML or CSS file, the web browser reads the raw bytes of HTML or CSS. However, it can’t do anything with it, so the raw bytes of data must be converted into something understandable.

Raw Bytes into Character Code.

The browser uses the specified character encoding to decode the raw bytes into characters. This process is known as decoding or character set conversion. UTF-8 is the most common character encoding used on the web because it supports a wide range of characters, including those from different languages and special symbols.

Character to Token

  • Further, these characters are parsed into tokens and the process is called tokenization.
  • Tokenization is the process of breaking down the characters into meaningful chunks called tokens.
  • This token represents the different parts of the HTML parsing such as the start tag, end tag, context and attributes.
  • Then, these tokens are converted into the nodes, it is an entity within a document object tree (DOM). The nodes are linked in a tree data structure known as the DOM.
  • The DOM (Document Object Model) is the representation of relationship between the parent-child and its adjacent siblings etc.
  • Here is the final flow of the browser execute the HTML file.

But, what about the CSS file?

Ok so let us know how the CSS file is executed by the browser.

When the browser receives the raw bytes of the HTML and it request to fetch the ‘styles.css’ stylesheet linked.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Chat Interface</title>
<link rel=”stylesheet” href=”styles.css”></link>
</head>
<body>

<script type=”text/javascript” src=”index.js”></script>
</body>
</html>

From raw bytes to CSSOM

  • A similar process is initiated as same as the raw bytes of HTML, it happens parallel for both HTML and CSS.
  • The raw bytes are converted into characters, and then tokenized.
  • Nodes are formed and finally form a tree structure. But for HTML something called DOM (Document Object Model) similarly, for CSS it is called CSSOM (CSS Object Model).
  • The CSSOM tree tells us how the different elements should look when rendered. The tree structure allows the browser to start with the most general rule and refine the computed styles by going down the tree to more specific rules. The tree uses the cascading principle, combining inheritance and specificity to compute the styles for the different objects on the page.

The Render Tree

The render tree is a data structure which is responsible for rendering the web pages. It is the combination of DOM and CSSOM. It includes only the elements that are going to be rendered on the page, taking into account styles and layout information.

Layout

Once the render tree is formed, the browser performs layout or reflow, determining the position and size of each render tree node based on its styling and the available space.

Paint

This step is called painting, rasterizing, or repainting. Finally, now the browser knows which node to show or hide with all the CSS properties, so it will paint the pixels on the screen according to the information from the layout.

But, wait what about the JS file? 🤔🤔🤔…

So, we will look about the js file and how it renders and more about the <script /> tag with its attributes async and defer and all the cases in my next article.

Thank you for reaching out till here and would love to know your feedback. Please comment your suggestion so that I can improve it in my next article.

Bishal kumar Saha.

]]>