Aliens Wiki
Cinematic Knowledge Experience
0%
Aliens Wiki
Now Playing
Aliens Wiki · Hinglish
⌨️ Keyboard Shortcuts
→Next slide ←Previous slide SpacePlay / Pause MNarration on/off FFullscreen ?Show/hide this
Press any key to close
Wiki Article · Cinematic

Reflow

Reflow (ya Layout) ek browser process hai jisme browser DOM elements ki position, size aur geometry…

Overview
🌟

Reflow — Quick Facts

📌

Property: Detail

🎯

Topic: Reflow (Layout Recalculation)

⚡

Type: Browser Rendering Process / Web…

🔑

Context: Web design, frontend engineering,…

Topic 1
📥 ⚙️ 🔬 💡

Infobox

📚 | Property | Detail | |---|---| | Topic | Reflow (Layout Recalculation) | | Type |…
Topic 2
✨

Reflow vs Repaint

💡

Background color change = repaint…

🔑

Width/height change = reflow +…

⚡

Transform/opacity animation =…

🎯

Performance optimization ka goal:…

Topic 3
📥 ⚙️ 🔬 💡

Browser Rendering Pipeline

💡

DOM/style change → Step 4 se…

🔑

Color/visibility change → Step 5…

⚡

Transform/opacity change → Step 6…

Topic 4
⭐

What Triggers Reflow

💡

Reading offsetHeight after writing…

🔑

getComputedStyle() — sometimes…

⚡

window.innerWidth — can trigger…

Topic 5
📥 📥 🧠 🔬 💡 🎯

Cost of Reflow

💡

Simple page (few elements): < 1ms…

🔑

Medium page (100-500 elements…

⚡

Complex page (1000+ elements, deep…

🎯

Mobile devices: 2-5x slower than…

Topic 6
📥 ⚙️ 🔬 💡

Layout Thrashing

💡

Read: element1.offsetHeight…

🔑

Write: element1.style.height =…

⚡

Read: element2.offsetHeight…

🎯

Write: element2.style.height =…

Topic 7
🔒

Minimizing Reflow

💡

Multiple DOM changes ko ek batch…

🔑

documentFragment use karo —…

⚡

offsetHeight, clientWidth,…

🎯

Pehle read karo (loop se bahar),…

Topic 8
✨

Reflow in Modern Frameworks

💡

React Virtual DOM maintain karta…

🔑

State change → Virtual DOM me…

⚡

Result: batched updates, kam…

🎯

Vue async update queue use karta…

Topic 9
📥 📥 🧠 🔬 💡 🎯

Performance Tools

💡

Layout events dikhta hai timeline…

🔑

Purple bars = layout/reflow — agar…

⚡

"Forced reflow is a likely…

🎯

Performance score me CLS…

Topic 10
✨

Reflow in Responsive Design

💡

Window resize karke breakpoint…

🔑

Desktop → mobile view switch =…

⚡

vw, vh, vmin, vmax — viewport…

🎯

Mobile browser ke address bar…

Topic 11
🔒

Best Practices

🎯 1. Reads aur writes batch karo — pehle sab layout properties read karo, phir sab DOM…
Topic 12
📥 ⚙️ 🔬 💡

Glossary

⭐ | # | Term | Meaning | |---|---|---| | 1 | Reflow | Browser process jisme DOM elements ki…
Comparison
✨

Reflow vs Repaint

⚖️

1: Kya change hota hai

⚖️

2: Cost

⚖️

3: Triggers repaint?

Diagram
📥 ⚙️ 🔬 💡

Visual Flow

📊 Diagram visualization — details in narration
Related Topics

See Also

📖

Repaint

🔗

DOM

💡

CSS

📚

Browser Rendering Engine

🔑

Virtual DOM

🌐

Critical Rendering Path

Quick Quiz
🧠 QUIZ TIME

Quiz — Question 1

Reflow ka sabse sahi definition kya hai?

Quick Quiz
🧠 QUIZ TIME

Quiz — Question 2

Reflow ka 'Topic' kya hai?

Complete! 🎉
COMPLETE

Reflow Complete!

Aliens Wiki · Hinglish · Cinematic Knowledge

✅

Reflow Complete

➡️

Repaint

1/20
0:00
REC 00:00ESC=Cancel
Aliens School
3
Recording shuru hone wali hai...
✅
Recording Complete
Video process ho rahi hai...
Live Class
Slide 1 / 7
Timer
00:00
📝 Speaker Notes
—
⏭️ Up Next
—
—
🗂️ All Slides