Browser internals
Part of the Frontend Developer Roadmap
In short
'What happens when you type a URL and press Enter?' and 'What's the event loop?' come up often. A clear, layered answer here quietly signals that you understand what you build on.
Interview-level understanding of how the browser actually works — rendering pipeline, event loop, JS engine — questions that separate surface-level users from deep understanders.
Think of it like this
A one-cook restaurant kitchen
JavaScript is a single cook. They finish the current dish before anything else. Urgent extras (promises) are handled right after that dish. New orders from the counter (timers, clicks) wait in line. That's the event loop.
Watch it happen
The event loop on 1, 4, 3, 2
log('1')
1/6Synchronous code runs first, so '1' prints straight away.
The big ideas
What you need to know
One main thread
JS, layout and paint share the main thread. A long-running function freezes clicks and scrolling.
Microtasks before macrotasks
Promise callbacks (microtasks) run as soon as current code finishes, before the next setTimeout (a macrotask).
The rendering pipeline
HTML to DOM, CSS to CSSOM, then layout, paint and composite. Know which changes trigger which step.
The URL question
DNS, TCP and TLS, HTTP request, response, parsing, rendering. Go as deep as the interviewer wants.
See it in code
Walk through the code
1console.log("1");2 3setTimeout(() => console.log("2"), 0);4 5Promise.resolve().then(() => console.log("3"));6 7console.log("4");8 9// Output: 1, 4, 3, 21/4Synchronous, so it runs immediately.
1 and 4 are synchronous. The promise callback is a microtask, so 3 runs when the script ends. The timer is a macrotask, so 2 comes last, even at 0ms.
Save yourself the pain
Common mistakes
Oops
Saying setTimeout(fn, 0) runs immediately.
Do this instead
It runs after current code and all microtasks finish. 0 means 'as soon as possible', not 'now'.
Oops
Answering the URL question with one sentence, or a 20-minute lecture.
Do this instead
Give the main steps in about a minute, then ask which part they'd like you to go deeper on.
Your mission
Predict, then run
Quick check
What's the output order of: setTimeout(() => log('A'), 0); Promise.resolve().then(() => log('B')); log('C');
Go deeper
- 1Be ready to explain the critical rendering path from memory.
- 2Practice explaining the JS event loop, microtasks vs macrotasks, with a concrete example.
- 3Read a deep-dive article on how your JS engine of choice actually executes code.
More technical at this stop
HTML, CSS, JavaScript, React, TypeScript
Performance optimization
Security (XSS, CSRF)
Accessibility
REST APIs
HTTP methods and status codes
System design (frontend)
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
