02. How Browsers Execute JS & The Critical Rendering Path • JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) • Rishabh Ki Kaksha

JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) › 02. How Browsers Execute JS & The Critical Rendering Path

40 mins

Course Syllabus

Module 1: Foundations & Evolution (Zero Level to Syntax Mastery)

01. What is JavaScript? History, TC39 & Client vs Server Execution 02. How Browsers Execute JS & The Critical Rendering Path 03. Datatypes Deep Dive: Primitives vs Reference Objects & Memory Layout 04. Variables, Scope & The Temporal Dead Zone (var vs let vs const) 05. Type Coercion, Equality Quirks (== vs ===, NaN & Object.is)

Module 2: V8 Engine Internals & Execution Context Architecture

06. Google V8 Engine Architecture: Ignition, Sparkplug & TurboFan 07. Execution Context Lifecycle: Creation Phase vs Execution Phase 08. Garbage Collection Mechanics & Memory Leak Profiling

Module 3: Functions, Closures & Functional Programming Patterns

09. First-Class Functions, Arrow Functions & Lexical this Binding 10. Closures Deep Dive: Encapsulation, Factory Functions & Memory Overhead 11. Currying, Partial Application & Function Composition (Pipe/Compose) 12. Method Borrowing: call(), apply(), bind() & Custom Polyfills

Module 4: Asynchronous Architecture, Event Loop & Promises

13. Event Loop Masterclass: Call Stack, Web APIs, Microtasks & Macrotasks 14. Promises Architecture: States, Chaining & Custom MyPromise Polyfill 15. Promise Combinators: all, allSettled, race, any & Concurrency Control 16. async/await Internals, Generators (function*) & Coroutine Emulation

Module 5: Objects, Prototypes, Classes & Metaprogramming

17. Prototypal Inheritance, Prototype Chain & __proto__ vs prototype 18. ES6 Classes, Static Blocks, Private Fields and Subclassing 19. Metaprogramming with Proxy & Reflect API (Reactive State Engine)

Module 6: Browser DOM, Event Architecture & High-Scale Polyfills

20. DOM Event Propagation: Capturing, Target, Bubbling & Delegation 21. Debouncing vs Throttling: Production Polyfills with Leading & Trailing Flags 22. Big Tech Machine Coding: Custom EventEmitter & PubSub System 23. Big Tech Machine Coding: Deep Clone with Circular References & LRU Cache

Interactive Lesson Studio

# 02. How Browsers Execute JS & The Critical Rendering Path

> JavaScript Notes by Rishabh - Topic 02

---

### 1. Browser Ke Andar Kya Hota Hai? (Asaan Bhasha Me)

Jab tu browser me koi URL daalta hai (jaise `google.com`), browser ko server se sirf **0s aur 1s (Bytes)** milte hain.

In raw bytes ko ek beautiful, interactive webpage me convert karne ke poore safar ko **Critical Rendering Path (CRP)** kehte hain.

**Browser ke 2 sabse bade don:**
1.  **Rendering Engine:** HTML aur CSS ko padh ke screen par pixels draw karta hai (Chrome ka Blink, Safari ka WebKit, Firefox ka Gecko).
2.  **JavaScript Engine:** JS code ko execute karta hai (Chrome/Node.js ka V8, Firefox ka SpiderMonkey).

---

### 2. Critical Rendering Path (CRP) Ke 6 Steps

Screen par website aane ke 6 step hote hain:

```
HTML Bytes ➔ Tokens ➔ DOM Tree
                                ↘
                                  Render Tree ➔ Layout (Reflow) ➔ Paint (Repaint) ➔ Composite (GPU)
                                ↗
CSS Bytes  ➔ Tokens ➔ CSSOM Tree
```

#### Step 1: DOM (Document Object Model) Tree Banana
*   Browser HTML tags (`<html>`, `<body>`, `<div>`) ko padhta hai aur ek **Family Tree** (Node Tree) banata hai.

#### Step 2: CSSOM (CSS Object Model) Tree Banana
*   Browser saari CSS (`style.css`, `<style>`) ko padh ke har element pe kaunsa color, size, font lagega uska tree banata hai.
*   **Note:** CSS Render-Blocking hoti hai! Jab tak CSS load nahi hoti, browser page nahi dikhata.

#### Step 3: Render Tree (Asli Cheezein)
*   DOM Tree + CSSOM Tree ko aapas me joda jata hai.
*   **Important:** Jo elements `display: none;` hain, wo Render Tree me **NAHI** aate! (Lekin `visibility: hidden;` wale aate hain kyunki wo space lete hain).

#### Step 4: Layout (Reflow) - Geometry Calculation
*   Browser har element ka exact X, Y position, width aur height calculate karta hai ki screen pe kahan baithega.

#### Step 5: Paint (Repaint) - Rang Bharna
*   Pixels, colors, shadows, borders, text ko screen par actual draw kiya jata hai.

#### Step 6: Compositing (Final Display)
*   Alag-alag layers ko GPU combine karke monitor/mobile screen par final frame dikha deta hai.

---

### 3. JavaScript Execution & Parser-Blocking (Sabse Bada Issue)

Jab browser HTML padh raha hota hai aur achanak use `<script src="app.js"></script>` milta hai:
1.  Browser HTML padhna **ROK** deta hai (HTML Parser Blocked).
2.  JS file download karta hai.
3.  JS file execute karta hai.
4.  Fir wapas bacha hua HTML padhna shuru karta hai.

Isi liye agar heavy JS file `<head>` me daal di, toh page white/blank screen dikhayega!

#### Solution: `async` vs `defer`

---

### 4. Reflow vs Repaint (Performance Killer in Frontend)

*   **Reflow (Bada Kharcha):** Jab element ka size, position ya structure change hota hai (`width`, `height`, `margin`, `padding`, `display`). Browser ko pura layout dobara calculate karna padta hai.
*   **Repaint (Chhota Kharcha):** Jab sirf look change hota hai layout nahi (`color`, `background-color`, `box-shadow`).
*   **Composite Only (Sabse Fast):** `transform: translate()` aur `opacity` direct GPU pe chalte hain — na reflow hota hai na repaint! (Smooth 60fps animations).

---

### 5. Interview Ke 4 Sawal Is Topic Se

1.  **`async` aur `defer` me kya farak hai?** -> `async` download hote hi turant parse rok ke execute hota hai (no order). `defer` pura HTML parse hone ke baad order me execute hota hai.
2.  **`<script>` tag ko `<body>` ke end me kyun daalte hain?** -> Taki HTML parse pehle complete ho jaye aur user ko blank screen na dikhe.
3.  **`display: none` aur `visibility: hidden` me CRP ka kya difference hai?** -> `display: none` Render Tree me hi nahi aata (no layout space). `visibility: hidden` Render Tree me aata hai aur layout space leta hai, sirf paint nahi hota.
4.  **Layout Thrashing kya hota hai?** -> Loop ke andar baar-baar DOM size read karna (`offsetHeight`) aur change karna, jisse browser baar-baar forceful reflow karta hai aur page lag hota hai.

---
**Next Topic:** 03. Datatypes Deep Dive: Primitives vs Reference Objects & Memory Layout

Loading lesson content...

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track