1. The overall architecture of the browser (macro cognition)

Modern browsers (take Chrome/Chromium as an example) are multi-process architecture:

浏览器主进程
 ├── 网络进程
 ├── GPU 进程
 ├── 渲染进程（每个 Tab / iframe）
 │     ├── JS 引擎（V8）
 │     ├── 渲染引擎（Blink）
 │     ├── 事件循环
 │     └── Web API
 └── 插件进程

Why multiple processes?

• ✅ SAFE (Sandbox Isolation)
• ✅ Stable (the crash of one page does not affect the others)
• ✅ Performance (parallel execution)

2. From input URL to page display (complete link)

This is the main line of must be tested in interviews.

1️⃣ URL parsing

• Completion Agreement
• Determine whether it is a search or a URL
• DNS resolution → IP

2️⃣ Network request (Network)

• TCP three-way handshake
• HTTPS: TLS handshake
• HTTP request/response
• Cache strategy (strong cache / negotiate cache)

3️⃣ Build DOM & CSSOM (rendering preconditions)

HTML ──> DOM Tree
CSS  ──> CSSOM Tree

• ⚠️ CSS blocks rendering
• ⚠️ JS will block DOM parsing

3. Key: Browser rendering pipeline (core)

🌈 Five stages of browser rendering

DOM + CSSOM
   ↓
Render Tree
   ↓
Layout（回流 / 重排）
   ↓
Paint（重绘）
   ↓
Composite（合成）

Let’s break it down one by one.

4. Render Tree

Rendering tree ≠ DOM tree

Features:

• Contains only visible nodes
• display: none ❌
• visibility: hidden ✅ (placeholder)

DOM + CSSOM → Render Tree

5. Layout (reflow/rearrangement)

👉 Calculate geometric information of elements

• location
• width and height
• box model

Operations that trigger reflow (⚠️ performance killer)

• Change:

  • width / height
  • padding / margin
  • position / display

• Read:

  • offsetTop
  • clientHeight
  • getBoundingClientRect()

Layout changes may require paint, but browsers can reuse pixels; inspect content and implementation.

6. Paint (redraw)

👉 Draw pixels to bitmap

Trigger redraw but not reflow:

• color
• background
• box-shadow
• outline

📌 Redrawing does not necessarily mean reflow

7. Composite (synthesis/GPU acceleration)

👉 Multiple layers are handed over to the GPU for compositing

Can trigger the composition layer (key point)

• transform
• opacity
• will-change
• position: fixed
• video / canvas

Reusable layers/content can permit compositor-only updates; initial paint, changes and layer rebuilds still cost work.

8. The relationship between JS and rendering (event loop)

JS is single-threaded

• JS execution time
• Rendering will be blocked

Event Loop simplified model

宏任务（script / setTimeout）
   ↓
微任务（Promise / MutationObserver）
   ↓
渲染（layout / paint）

📌 Microtasks will not be rendered until they are cleared

9. Browser Optimization Strategy (Engineering Practice)

1️⃣ Reduce backflow

// ❌ 多次回流
el.style.width = '100px'
el.style.height = '100px'

// ✅ 合并
el.style.cssText = 'width:100px;height:100px'

2️⃣ Separation of reading and writing

// ❌
el.style.width = el.offsetWidth + 10 + 'px'

// ✅
const w = el.offsetWidth
el.style.width = w + 10 + 'px'

3️⃣ Use transform instead of top/left

/* ❌ */
left: 100px;

/* ✅ */
transform: translateX(100px);

10. High-frequency interview questions related to browser rendering

❓ Why is CSS placed in the head and JS placed in the body?

• CSS rendering blocking
• JS blocks DOM parsing

❓ async vs defer

Properties	Whether to block	Execution time
async	❌	Execute immediately after downloading
defer	❌	After DOM parsing is completed

❓ requestAnimationFrame

• Executed before rendering the next frame
• Suitable for animation