Modern browsers aren’t “open internet pipes”—they’re sandboxes with sharp boundaries. This article builds a practical mental model for why a request can be sent but the response can’t be read, and how the browser decides what your code is allowed to access. We’ll connect the key pieces—Same-Origin Policy, CORS, cookies (SameSite/HttpOnly/Secure), storage tradeoffs, and CSP—then walk through the real production failure modes and the fastest ways to debug them. If you’ve ever asked “why does this work in curl but fail in the browser?”, this is the missing layer.
When you type a URL or your frontend calls fetch(), the browser runs the same end-to-end pipeline: resolve DNS, establish a transport connection (TCP or QUIC), negotiate TLS, speak HTTP/1.1–2–3, pass through CDN/edge, and finally reach your origin. This post breaks down that chain with a practical, interview-ready mindset—what each layer does, where time is spent, and how real-world issues like DNS latency variance, TLS misconfigurations, CDN caching mistakes, HTTP/2 head-of-line blocking, and HTTP/3/QUIC trade-offs show up in DevTools and how to fix them.
When a Chrome tab feels “alive”—smooth scrolling, instant clicks, animations that don’t stutter—you’re watching a scheduler keep the renderer’s main thread from collapsing into chaos. This post demystifies where the browser event loop actually “lives” (hint: not inside JavaScript or V8), what developers really mean by “macrotasks” and microtasks, and why Promises can appear to “cut the line” ahead of timers. You’ll see how a single turn of the loop flows from task → microtask checkpoint → rendering opportunity, where requestAnimationFrame fits, and why setTimeout(0) is never truly immediate—especially in background tabs. Finally, we connect the dots from HTML bytes → V8 execution → event loop scheduling → pixels, and show how to observe it all in Chrome DevTools to diagnose long tasks, input delay, and rendering stalls.
How does JavaScript actually run in V8? This post walks through the real pipeline—source → AST → bytecode → tiered machine code—then explains stack vs heap, closures, V8 garbage collection, and the hands-on Node/d8 tricks to trace optimizations and find leaks.
This post refreshes the parts of JavaScript that explain most “wait…why?” moments in interviews and real debugging: execution contexts, scope, hoisting, closures, and this.
From HTML bytes to pixels, modern Chrome turns source code into what you see through a 10-stage pipeline: parsing, style, LayoutNG, pre-paint (property trees/paint chunks), paint recording, commit, CAP layerization, tiling, raster, and Viz/present. This article explains each stage’s inputs/outputs, the key data structures behind RenderingNG, and how to use the pipeline as a mental model for debugging jank and performance issues.
