BRUCE_FE Interview Notes - Page Loading - Explaining Web Rendering Process (CRP Path)

Basic Concepts

The process of converting HTML, CSS, and JavaScript into pixels is called the Critical Rendering Path (CRP). Understanding this process is crucial for optimizing web performance.

User requests URL ex: https://www.google.com
     │
     ↓
Server processes request ─────────────────────┐
     │                                        │
     ├─→ SSR (Server-Side Rendering)          │
     │    Server generates complete HTML      │
     │                                        │
     ├─→ SSG (Static Site Generation)         │
     │    Returns pre-generated static HTML   │
     │                                        │
     └─→ SPA (Single Page Application)        │
          Returns basic HTML framework        │
     │                                        │
     ↓                                        │
HTML returns to browser ◄─────────────────────┘
     │
     ↓
HTML ──────┐
           ↓
        DOM Tree      CSS ──────┐
           │                    ↓
           │               CSSOM Tree
           │                    │
           └─────────┬─────────┘
                     ↓
               Render Tree  ◄─── JavaScript Execution
                     │           (can modify DOM and CSSOM)
                     ↓
                  Layout
                     │
                     ↓
                   Paint
                     │
                     ↓
                Composite

1. HTML Parsing → DOM Tree

The browser converts HTML into the DOM (Document Object Model), which serves as the object representation of the webpage and interface for JavaScript operations. The parsing process is progressive, allowing for incremental content processing.

2. CSS Parsing → CSSOM Tree

CSS is parsed into the CSSOM (CSS Object Model), which is a render-blocking resource that must be completely constructed before proceeding to the next step.

3. JavaScript Execution

JavaScript is a parser-blocking resource. When the browser encounters a script tag, it pauses DOM construction to download and execute JavaScript. JavaScript can modify both DOM and CSSOM, so it must wait for CSS parsing to complete. Using async or defer attributes can change the execution timing.

4. DOM + CSSOM → Render Tree

The DOM and CSSOM are combined to form the render tree, which includes only visible elements (elements with display: none are excluded) and their style information.

5. Layout（Reflow）

Calculates the exact position and size of each visible element, determining its positioning in the viewport. Changes in viewport size trigger a reflow.

6. Paint（Repaint）

Converts the layout into actual pixels, including text, colors, borders, shadows, and other visual effects, typically performed across multiple layers.

7. Composite

Combines different painted layers into the final screen, handling stacking order and transparency. Using GPU acceleration can improve performance.

Performance Optimization Recommendations

🔥 Common Interview Questions

// ------------------------- 1. Batch DOM modifications instead of individual changes -------------------------
// Bad practice - Multiple Reflow triggers
const element = document.getElementById('myElement');
element.style.width = '100px';
element.style.height = '200px';
element.style.margin = '10px';

// Good practice - Only one Reflow trigger
const element = document.getElementById('myElement');
element.classList.add('new-layout');
// Or use style.cssText
element.style.cssText = 'width: 100px; height: 200px; margin: 10px;';

/* CSS */
.new-layout {
  width: 100px;
  height: 200px;
  margin: 10px;
}

// ------------------------- 2. Use DocumentFragment to batch add multiple elements -------------------------
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
document.getElementById('myList').appendChild(fragment);

// ------------------------- 3. Use transform instead of position adjustments -------------------------
// Bad practice - Triggers Reflow
element.style.left = '10px';
element.style.top = '20px';

// Good practice - Only triggers compositing
element.style.transform = 'translate(10px, 20px)';

// ------------------------- 4. First set display: none, make changes, then show again -------------------------
element.style.display = 'none';
// Make multiple changes...
element.style.width = '100px';
element.style.height = '200px';
element.style.margin = '10px';
// Finally show it, triggering Reflow only once
element.style.display = 'block';