Browser Rendering Process and Optimization

The process of a browser rendering a web page on the screen involves several steps. Understanding these steps is crucial for optimizing the performance of web applications.

The Entire Rendering Process

The sequence of events in the browser rendering process is as follows:

HTML parsing → DOM creation → CSS parsing → CSSOM creation 
→ render tree creation → layout → paint → compositing

1. HTML Parsing and DOM Tree Creation

The browser reads the HTML document and creates a DOM (Document Object Model) tree. The DOM tree represents the hierarchical structure of the HTML document as a tree of objects.

Characteristics of the DOM Tree:

• Represents the HTML document's structure as an object model
• Each element, attribute, and text is represented as a node
• Parent-child and sibling node relationships can be determined

Role: Provides an interface for JavaScript to navigate and manipulate HTML elements.

2. CSS Parsing and CSSOM Tree Creation

The browser parses CSS files and <style> tags to create a CSSOM (CSS Object Model) tree.

Characteristics of CSSOM:

• Represents each HTML element's applied CSS rules as objects
• Combines with the DOM to prepare visual styles
• Considered a render-blocking resource

3. Render Tree Formation

The browser combines the DOM and CSSOM to create a render tree.

Characteristics of the Render Tree:

• Only includes elements that will be displayed on the screen (display: none elements are excluded)
• Includes the styles and visual information for each element
• The core data structure for rendering the screen

4. Layout (Layout/Reflow)

The browser calculates the exact position and size of each element based on the render tree.

Main Tasks:

• Determines the position of elements within the viewport
• Calculates the size, margin, and padding of each element
• Layout calculations can cause reflow

5. Paint

The browser draws the elements on the screen in pixel units, using the positions and sizes calculated during the layout stage.

Applied Style Properties:

• Color, text, shadow, border
• Background image, transparency

Paint Layers:

• z-index, position, opacity properties can create independent layers
• Each element can have its own paint layer

6. Compositing

The browser combines the layers created during the paint process onto the screen.

Compositing Process:

• Considers the layering order (z-index, position)
• Uses the GPU to composite the final screen
• Completes the rendering of the browser screen

Summary of the Rendering Process

Stage	Description	Key Points
HTML Parsing	HTML → DOM Tree	Incremental rendering possible
CSS Parsing	CSS → CSSOM Tree	Render-blocking resource
Render Tree Creation	DOM + CSSOM → Render Tree	Excludes display:none elements
Layout	Calculates element position/size	Can cause reflow (high cost)
Paint	Draws pixels	Can cause repaint
Compositing	Combines layers onto the screen	Utilizes GPU acceleration

---

Critical Rendering Path and Optimization

The Critical Rendering Path (CRP) refers to the sequence of events from the time the browser receives HTML, CSS, and JavaScript resources to the time it renders the first pixel on the screen.

1. DOM construction (HTML parsing)
        ↓
2. CSSOM construction (CSS parsing)  
        ↓
3. Render tree creation (DOM + CSSOM)
        ↓
4. Layout (position/size calculation)
        ↓
5. Paint (actual pixel drawing)

While it may seem similar to the browser rendering process, the CRP is specifically focused on optimizing the time it takes for the browser to receive resources and render the first pixel.

Key Checkpoints

1. CSS Blocks Rendering

<!-- Rendering is blocked until this CSS is loaded -->
<link rel="stylesheet" href="styles.css">

If CSS is not loaded, the browser will block rendering, causing a Flash of Unstyled Content (FOUC), where the HTML is rendered without CSS, and then the CSS is applied, causing a sudden change in the layout.

2. JavaScript Blocks Parsing

<!-- HTML parsing is blocked until this script is executed -->
<script src="app.js"></script>

JavaScript can update the DOM structure, so the browser blocks HTML parsing until the script is downloaded and executed.

CRP Optimization Strategies

1️⃣ JavaScript Loading Strategy

<!-- ❌ Blocks parsing -->
<script src="app.js"></script>

<!-- ✅ Executes after HTML parsing is complete -->
<script src="app.js" defer></script>

<!-- ✅ Downloads in parallel, executes as soon as downloaded -->
<script src="analytics.js" async></script>

<!-- ✅ Module syntax (automatic defer) -->
<script type="module" src="app.js"></script>

Differences between each approach:

• Regular <script>: Blocks HTML parsing and executes immediately
• defer: Downloads in parallel with HTML parsing, executes after parsing is complete (order is guaranteed)
• async: Downloads in parallel with HTML parsing, executes as soon as downloaded (order is not guaranteed)
• type="module": Automatically defers execution

2️⃣ Using Resource Hints

<!-- Preloads font -->
<link rel="preload" as="font" href="/myfont.woff2" type="font/woff2" crossorigin>

<!-- Preloads LCP image -->
<link rel="preload" as="image" href="/hero.jpg">

<!-- Prefetches resources for the next page -->
<link rel="prefetch" href="/next-page.bundle.js" as="script">

Types of resource hints:

• preload: Prioritizes the download of resources needed for the current page
• prefetch: Downloads resources for the next page during idle time
• preconnect: Establishes a connection to a specific domain in advance

3️⃣ Font Optimization

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Need for font optimization:

• Web fonts require a network request
• Large font files can delay initial rendering
• font-display: swap allows the browser to display the system font first and then swap to the web font once it's loaded

font-display options:

• auto: Browser default behavior
• block: Hides text until the font is loaded (up to 3 seconds)
• swap: Displays system font first, then swaps to web font once loaded
• fallback: Uses a fallback font for a short period
• optional: Decides whether to use the web font based on network conditions

4️⃣ Image Optimization

<img src="thumb.webp" loading="lazy" alt="Thumbnail">

Image optimization methods:

• Use WebP, AVIF, or other formats optimized for the web
• Use lazy loading to delay loading images until they're visible in the viewport
• Use srcset and sizes attributes to provide responsive images
• Optimize image file size and compression

---

Reflow and Repaint

Let's dive deeper into the process of updating elements in the browser.

Definitions

• Reflow: The process of recalculating the layout of an element, including its position and size.
• Repaint: The process of redrawing an element's visual styles, such as color, background, or border.

DOM Update → Reflow/Repaint Flow

1. DOM Update

• JavaScript updates the DOM, marking the affected node as dirty.
• The render tree remains unchanged at this point.

2. Render Tree (Render Tree) Check

• The browser checks the dirty node and determines which areas of the render tree need to be updated.
• If the size or position of an element changes, a reflow is marked as necessary.
• If only visual styles change, a repaint is marked as necessary.

3. Reflow (Layout) Stage

• The browser recalculates the box model (box model) of the dirty node and its affected ancestors, descendants, and siblings.
• The render tree is updated with the new layout information.

4. Repaint (Paint) Stage

• The browser redraws the element with the updated visual styles.
• The repaint stage occurs after the reflow stage, if necessary.

5. Composite Stage

• The browser composites the painted layers onto the screen using the GPU.

DOM update → dirty mark → reflow (if necessary) → repaint → composite → screen update

Reflow Details

Definition

• The process of calculating the layout of an element, including its position and size.

Relationship with Browser Rendering

DOM + CSSOM → Render Tree → Layout (Reflow) → Paint → Composite

Reflow is a necessary step in the rendering process to ensure that elements are correctly positioned and sized.

Occurrence Conditions

• When an element's size, position, or DOM structure changes.
• When CSS properties that affect layout are changed, such as width, height, margin, padding, or border.
• When the browser window is resized or scrolled.

Characteristics

• Reflow can be an expensive operation, especially when it affects many elements.
• Reflow can cause a cascade of reflows in affected elements.

Repaint Details

Definition

• The process of redrawing an element's visual styles, such as color, background, or border.

Relationship with Browser Rendering

Layout (Reflow) → Paint (Repaint) → Composite

Repaint occurs after the reflow stage, if necessary, to update the visual styles of an element.

Occurrence Conditions

• When an element's visual styles change, such as color, background-color, or border-color.
• When an element's opacity or transparency changes.

Characteristics

• Repaint is generally less expensive than reflow.
• Repaint only affects the element being updated, whereas reflow can affect multiple elements.

Reflow vs Repaint Comparison

Category	Reflow (Layout)	Repaint (Paint)
Definition	Calculates element position and size	Redraws element visual styles
Occurrence Conditions	Size, position, or DOM structure changes	Visual style changes
Calculation Cost	High	Low
Cascade Effect	Can affect multiple elements	Only affects the updated element
Examples	width, height, display, font-size changes	color, background-color, border-color changes

In conclusion, understanding the browser rendering process and the critical rendering path is crucial for optimizing the performance of web applications. By minimizing reflow and repaint operations, using efficient JavaScript loading strategies, and optimizing fonts and images, developers can improve the user experience and reduce the time it takes for the browser to render the first pixel on the screen.