Rendering of the Webpage

5 min readJan 20, 2024

1. Fetching: The process begins when a user enters a URL or clicks on a link, sending a request to the web server. The server processes the request and sends back a response, usually containing HTML, CSS, and JavaScript files.

2. HTML Parsing: The browser starts by parsing the HTML content received in the response. It creates a Document Object Model (DOM) tree, representing the structure of the webpage.

Creating the Render Tree

3. CSS Parsing and Styling: The browser parses the CSS files to understand the styling rules. It constructs a CSS Object Model (CSSOM) based on these rules. The DOM and CSSOM are then combined to create the Render Tree, which represents the visual structure of the webpage.

4. Layout (Reflow happens here): The browser calculates the layout of each element in the Render Tree. It determines the size and position of each element on the webpage.

5. Painting (Repaint happens here): The actual painting of pixels on the screen occurs in this stage. The browser goes through the Render Tree and paints each element on the screen. Also includes Rasterization: The browser converts vector graphics into raster images, which are composed of pixels.

6. Compositing: The final step involves layering and blending different elements to create the complete webpage. This includes handling z-index, opacity, transform, and other visual effects.

Reflow and Repaint: Changes to the DOM or styles may trigger reflow (recalculating layout) and repaint (updating pixels) processes. These processes are resource-intensive and should be minimized for optimal performance.
The callbacks registered with requestAnimationFrame are executed just before the browser repaints the screen (before the next repaint). Around 60 fps, meaning it aims to complete the rendering cycle every 16.67 milliseconds.
Layouts (triggers): JavaScript > CSS > Reflow > Repaint > Composite
https://csstriggers.com/

Render-blocking Elements:

1. Synchronous JavaScript: JavaScript files included without the async or defer attributes are parsed and executed immediately when encountered. This blocks the HTML parser, halting the construction of the DOM until the script is completely loaded and executed. This is why it's often recommended to place JavaScript files right before the closing </body> tag or use async/defer attributes.

2. External CSS (Render-Blocking CSS): CSS files in the <head> of the document are render-blocking. Get it to the client as soon and as quickly as possible to optimize the time to first render. To optimize, you should use minification, splitting into bundles, browser caching, and the media attribute to make the CSS non-render-blocking.

<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />

3. Large Files and Resources: Large images, CSS, JavaScript files, and other media assets that take a long time to download can delay the rendering of the page. Optimization techniques such as compression, minification, and using appropriate file formats are essential to mitigate this.

4. Unoptimized Images.

5. Non-Asynchronous API Calls.

6. Heavy DOM or CSSOM.

7. Web Fonts: Web fonts can also be render-blocking. Browsers may delay text rendering until the font files are fully loaded. To optimize, use woff, woff2 formats and local fonts.

8. Excessive DOM Manipulations or JavaScript Execution.

9. Iframes: Iframes can block the window’s onload event because the browser waits for the iframes to load completely.

10. Server Response Time: The time taken by the server to respond with the initial HTML document can also be a blocking factor. This depends on the server’s performance and the backend architecture.

RAIL Model: Performance

The RAIL model is a performance optimization framework provided by Google. RAIL stands for Response, Animation, Idle, and Load, which are the four key areas of user interaction with a website. The model sets performance goals for each area to ensure a good user experience.

Response: Respond to user inputs within 50 milliseconds. Quick responses give the user the feeling of instant feedback, which is crucial for maintaining the perception of a direct manipulation interface.

Animation: Produce a frame in 10 milliseconds. This goal ensures smooth animations at 60 frames per second (fps). Human eyes perceive animations as smooth at this frame rate. Use FLIP technique to optimize animation.

Idle: Maximize idle time to increase the odds that the page responds to user input within 50 ms. The browser’s main thread should be freed up as much as possible to allow time for processing background tasks, such as garbage collection or preparing assets for upcoming animations or responses.

Load: Aim for a maximum load time of 5 seconds for the content on a mobile network. Fast loading is key to keeping users engaged. The longer it takes for a page to load, the more likely users are to abandon it. Optimizing content, compressing images, caching, and reducing the number of resources can help achieve this goal.

Common Triggers for Layout/Reflow:

1. DOM Manipulations:

Adding, removing, or updating DOM elements.
Changing the innerHTML property of an element.

2. CSS Changes:

Modifying CSS properties of an element, especially those that affect dimensions or position (like width, height, margin, padding, border, etc.).
Changing the className or classList of an element.
Toggling CSS classes.

3. Style Calculations:

Accessing certain properties in JavaScript that require the browser to calculate style or layout information, such as:
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight
getComputedStyle()
getBoundingClientRect()

4. Window or Layout Changes:

Resizing the window or changing the orientation of the device.
Scrolling.
Modifying the font-size of the root element (which affects rem units).

5. CSS Pseudo-classes:

Hover states or other pseudo-classes that change styles.

6. JavaScript Actions:

Actions in JavaScript that could implicitly cause layout, like focusing on an input field or manipulating the DOM in ways that require re-measuring.

7. Tables:

Layout changes in tables can be particularly expensive, as they often require recalculating the entire table.

8. Flexbox and Grid:

Changing elements in Flexbox or Grid layouts can trigger reflow, as these layouts depend on the relationship between elements.

Minimizing Layout/Reflow Impact:

Batch DOM and Style Changes: Make multiple changes to the DOM or CSS in a single batch to minimize the number of reflows.
Use CSS Transforms for Animations: For animations, use CSS transforms and opacity, which often don’t trigger layout and can be hardware accelerated.
Debounce Window Resize Events: If you have code that runs on window resize, debounce it so it doesn’t trigger too many layout calculations.
Avoid Fixed or Sticky Positioning: If possible, avoid excessive use of position: fixed or position: sticky, as they can increase the complexity of layout calculations.