From bytes to pixels — parse, style, layout, paint, composite — and how your JS/CSS kicks each stage.

intermediate

How Browsers Load a Page explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

beginner

Critical Rendering Path explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

intermediate

DOM CSSOM Render Tree explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

intermediate

Reflow vs Repaint explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

intermediate

Compositor Layers explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Main Thread vs Compositor Thread explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Browser Networking 101 explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

intermediate

HTTP Caching Headers explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

intermediate

Service Workers Overview explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Cache Storage API explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

CORS Explained for Frontend explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

intermediate

Preflight OPTIONS Requests explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

intermediate

Content-Type and MIME Sniffing explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

intermediate

Same-Origin Policy explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

intermediate

Browser Storage Comparison explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

beginner

BFCache Back Forward Cache explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Page Lifecycle Events explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

intermediate

visibilitychange and Page Hide explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

intermediate

Navigation Timing API explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Resource Timing API explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

PerformanceObserver explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Long Tasks API explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Layout Instability API CLS explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Event Timing for INP explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Browser DevTools Network Panel explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

beginner

Browser DevTools Performance Panel explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

intermediate

Memory Profiling Basics explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Throttling CPU and Network explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

beginner

User Agent Client Hints explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Permissions Policy explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Feature Policy Legacy Notes explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Cross-Origin Opener Policy explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Cross-Origin Embedder Policy explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Trusted Types Intro explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced

Browser Extension Messaging Basics explained for frontend engineers — mental model, examples, common mistakes, and interview tips.

advanced