Foundations
The language and the platform. JavaScript core, the DOM, and how the browser actually renders. Every interview at every level builds on this floor.
JavaScript Core
Closures, scope, hoisting, the `this` binding, prototypes, equality, and the language semantics every interviewer assumes you have memorized.
Why interviewers ask
Filters out candidates who can use a framework but cannot debug it. Closures and `this` show up in framework internals, library APIs, and almost every bug report you will ever see.
Real-world relevance
Every React hook leans on closures. Every event handler leans on `this` semantics. Every utility you write across a codebase is bounded by what the language actually guarantees.
Common interview patterns
- Explain closure-based encapsulation and the cost of holding references
- Trace `this` through arrow functions, methods, and event handlers
- Walk through hoisting, the TDZ, and var/let/const lifecycle
- Compare `==`, `===`, and the coercion table edge cases
Common mistakes
- Confusing block scope with function scope under `var`
- Assuming arrow functions create a new `this` (they inherit it)
- Treating `typeof null` as anything other than `'object'`
- Mutating a captured variable inside a loop closure without realizing it
Follow-up questions
- Walk through what a polyfill for `Function.prototype.bind` would look like
- How would currying change the function's `length` and `name`?
- When does the engine optimize away a closure, and when can't it?
Browser and Rendering
How the browser turns HTML, CSS, and JS into pixels — the critical rendering path, layout vs paint vs composite, and where work blocks the main thread.
Recommended prerequisites: javascript-core
Why interviewers ask
Performance answers that don't ground in the rendering pipeline are guesses. Senior interviewers test whether you can explain *why* a fix works, not just *that* it does.
Real-world relevance
Debugging jank, slow LCP, or layout shifts always traces back to the pipeline. Knowing which stage a CSS property triggers is the difference between shipping a 60fps animation and a stuttery one.
Common interview patterns
- Walk through the Critical Rendering Path from HTML to pixels
- Distinguish reflow, repaint, and composite — and what triggers each
- Identify render-blocking resources and how to unblock them
- Explain how layout, paint, and composite map to DevTools' Performance panel
Common mistakes
- Conflating reflow with repaint — only layout-affecting changes reflow
- Assuming `transform` and `opacity` always stay on the compositor (they can promote layers and bloat GPU memory)
- Forgetting that JS parsing blocks rendering unless `defer` or `async` is used
- Skipping the CSSOM step when explaining why CSS is render-blocking
Follow-up questions
- Why does `display: none` skip layout entirely while `visibility: hidden` does not?
- How would you debug a Cumulative Layout Shift regression?
- What does the browser do differently for an off-screen `<iframe>`?
DOM
The document model, event propagation, web storage, service workers, and the platform APIs that frameworks abstract but interviewers still ask about directly.
Recommended prerequisites: javascript-core
Why interviewers ask
Reveals whether you understand the platform underneath React. Every framework-specific quirk (synthetic events, hydration mismatches, PWA caching) traces back to a DOM concept.
Real-world relevance
Event delegation keeps long lists cheap. Service workers unlock offline. The wrong storage choice leaks auth tokens. These are decisions made weekly on real codebases.
Common interview patterns
- Explain capture, target, bubble — and why event delegation works
- Pick the right storage: cookie vs localStorage vs sessionStorage vs IndexedDB
- Describe the service worker lifecycle and what makes a PWA installable
- Trace what happens between a click and a network request
Common mistakes
- Adding listeners in a loop instead of delegating to a parent
- Storing JWTs in localStorage (XSS-readable) instead of HttpOnly cookies
- Assuming service workers run on the main thread
- Forgetting `stopPropagation` does not stop default behavior
Follow-up questions
- How would you sync state across multiple browser tabs of the same app?
- What changes when a service worker controls a page vs when it doesn't?
- How would you debug a memory leak rooted in a forgotten DOM reference?