In the modern internet era, a fast-paced web is paramount. Users expect websites to open at the tip of the mouse and simultaneously have seamless interactions. Also, a page’s ranking and traffic largely depend on how quickly websites load and become interactive. A crucial aspect of achieving this is understanding how browsers render web pages. By grasping the internal process of rending web pages, one can make informed frontend architecture, optimize frontend bottlenecks, and ultimately make user experience exceptional.
This article delves into different aspects of the network calls that are made to the server, browsers receive the request, and transform HTML, CSS, and JavaScript into a visual representation and interactive. From the initial URL request to the final paint, we’ll explore each stage, uncovering the critical rendering path and highlighting optimization techniques to build high-performing web applications. This knowledge is not just beneficial for front-end developers; it’s essential for anyone involved in front-end system design.
Network Calls
Computers connected to the Internet send and receive information. They can act as clients (requesting data) or servers (providing data). Clients are typically user-centric devices connected to the Internet and usually have web-accessing software like browsers or other apps. On the other hand, servers are computers that generally store information, web pages, emails, multimedia files, etc.
When a user enters the URL inside the browser and hits to search button, he can see the website on his browser. Behind the scenes, numerous processes are being executed between typing a URL and seeing the website on the browser. Let us understand these processes,
- When you input the URL and hit enter in the browser, first your browser checks if any cache related to the website is saved in its directory, if yes, then it would not make any request call but rather just serves you back the Website cache. It also checks service workers or even in operating system.
- When a website isn’t found in your local cache, your computer contacts a Domain Name System (DNS) server through your ISP. The DNS server resolves domain names to their unique IP addresses, essentially acting as the Internet’s address book.
- The DNS server then returns the special address of the server where the website lives.
- The browser sends the HTTP request message to the server, asking to send back a copy of the request website. This request or any other request sent between the client and server is sent over across internet using TCP/IP protocol.
- If server approves the request of the client, then the server sends the client a “200 OK” message, which generally means request has been accepted and sends back requested data over same protocol.
Also read, Why System Design is important for a Developer!
How Browsers Render Web Pages
Now that your browser has the files, the question is: how does browser render the webpages? Let’s discover the processes that occur before your webpage is served.
Parsing
Once your browser receives the first chunk of the data, it begins the parsing of the data received. Parsing means analyzing and converting received information into a browser format that the runtime environment inside the browser can run. Browser takes the help of a Browser engine, to convert and display the received information. Browser Engine uses Critical Rendering Path to convert data into pixels on the screen. Here is how the process works:-
- First, the HTML document will be parsed using an HTML parser. The parser converts everything into a token with the help of the tokenization method, these tokens then will be used to build a DOM tree. DOM tree will contain nodes, storing information like content, element type, attributes, and children.
- While parsing HTML, if the parser encounters any external stylesheets (
<link>) or scripts (<script>) then it will fetch those files. This fetching can be synchronous (blocking further HTML parsing until the resource is downloaded) or asynchronous (allowing HTML parsing to continue). Theasyncanddeferattributes on<script>tags control this behavior for JavaScript. - CSS generally blocks rendering until it’s downloaded and parsed.
- Next Up, after the browser has fetched all the CSS files, they will get parsed by the CSS parser. The parser will convert the CSS into tokens and tokens into a CSSOM tree.
- Now Browser executes the downloaded JavaScript script. This process is also known as Scripting.
Using Async or Defer tag in Script
When you normally use script tags, during parsing when the HTML parser encounters it, the browser stops HTML parsing, fetches the JavaScript tag, starts executing it and the parser resumes its parsing process.
Async tag in Script
When the parser encounters a script tag with the async attribute, it begins downloading the JavaScript file asynchronously in the background, but importantly, it does not halt HTML parsing. Once the code is available, it stops HTML parsing, executes the JavaScript code, and then continues HTML parsing.
<script async src="scriptURL/PATH"></script>
Defer tag in Script
When the parser encounters a script tag with the defer attribute, it continues with parsing HTML and fetches Javascript code asynchronously, once the code is available, it does not stop HTML parsing, and it continues HTML parsing till the whole content is parsed and finally executes the JavaScript code.
<script defer src="scriptURL/PATH"></script>
Also read, How JavaScript works with HTML you might not know
Rendering
The rendering process includes styling, layout, and paint. By combining both DOM and CSSOM, the browser creates a new Render Tree, which is used to calculate the layout and position of each element, which is then painted on the screen.
Style
The Render tree will contain all the information except, the element with {display: none} property. The tree contains nodes as per their hierarchy, with each node having information like content, attributes, element type, and styles. Nodes that have visibility: hidden applied are included in the render tree, as they take up space.
To build the Render Tree, the browser matches each element of the DOM tree with the corresponding style properties in the CSSOM tree.
Layout
After matching, the browser applies styles to each element and computes each element’s final layout and position on the page, which represents the final appearance of the page. In layout, the node’s size and positions are determined! If your content has an Image included then the browser initially renders the page without knowing the image’s dimensions. It guesses or uses default values.
When the image is downloaded, the browser gets to know the actual width and height of the images. So it recalculates the whole layout to accommodate the image’s true size. This recalculation is the “reflow.” Also, reflow not only on the image but also any change in content, element’s dimension, element’s position, javascript’s manipulation, or dynamic CSS.
Reflows are a performance bottleneck. The browser has to do extra work to recalculate the layout, which can slow down page rendering. By declaring image dimensions (width and height attributes) or using CSS to reserve space for elements, you can minimize reflows and improve page performance.
Also read, Simple tutorial to use Checkbox inside Select Option using JavaScript
Painting
The final step in the critical rendering path is “painting” or “rasterization”. During painting, the calculated layout is converted into actual pixels on the screen. The first time this happens is called “First Meaningful Paint” (FMP), which is one of the very important key metrics in performance.
Painting involves drawing all visual aspects of elements: text, colors, borders, shadows, images, etc. The browser must perform this process very rapidly for a smooth user experience.
Also read, Understanding Throttling in JavaScript
Compositing
To speed up repainting (when changes occur), the browser often divides elements into layers. This allows for more efficient updates to specific parts of the screen.
While layers enhance performance, they consume memory. Excessive layer creation can lead to performance issues due to memory overhead. Therefore, layer creation should be used strategically as part of web performance optimization.
And finally, this is how browsers render web pages.
Common issues with painting and compositing
For smooth scrolling and animations, the main thread (which handles style calculations, reflow, and paint) must complete its work within 16.67ms (approximately 60 frames per second). Devices with high resolutions (like iPads) have a massive number of pixels to paint, making speed even more critical.
Certain CSS properties and elements (e.g., <video>, <canvas>, opacity, 3D transforms, will-change) trigger the creation of separate layers. These layers are often handled by the GPU, which significantly improves paint and repaint performance. Elements that are children of a layered element, will also be painted on that same layer, unless they themselves meet the requirements to be painted on their own layer.
Also read, Simple steps to Increase your Website’s Web Performance
Final Words
Understanding how browsers render web pages is the fundamental concept of front-end system designs. As we get to know this process involves different subtasks, from network calls, parsing, layout building, painting, and javascript execution. We’ve explored key strategies for minimizing reflows and repaints, optimizing CSS and JavaScript, and understanding the critical rendering path. While the browser rendering process can seem daunting, a solid grasp of these core concepts empowers us to build performant, scalable, and user-friendly web applications.
Also check out our other articles on various topics like JavaScript, React, and Data Structure and Algorithm.
Leave a Reply