A dense, scan-first view for the final hour before an interview. Each card gives you the answer shape, the trap to avoid, and the metric or debugging signal to mention.
Navigation pipeline
Parse URL, check cache and policy, resolve DNS, connect, negotiate TLS, request, stream HTML, parse, render, execute JavaScript, hydrate, and interact.
Do not stop at DNS and HTTP. Include rendering, security, and Web Vitals.
Tiered execution
V8 parses source, creates bytecode, runs Ignition, profiles hot paths, optimizes with TurboFan, and de-optimizes when assumptions fail.
Do not say JavaScript is only interpreted or TypeScript makes runtime faster.
Runtime environment
Execution context contains lexical bindings, variable bindings, and this. Function calls create contexts that are pushed onto the call stack.
Do not say hoisting physically moves code.
Active execution
The call stack tracks active frames. Function calls push frames; returns and thrown errors pop frames. Async waiting happens outside the stack.
Do not say async work stays on the stack while waiting.
Reachability
The heap stores objects and dynamic data. Garbage collection reclaims unreachable objects; leaks happen when unused objects remain reachable.
Do not say garbage collection prevents memory leaks.
Scheduling
The event loop runs a task, drains microtasks after the stack clears, gives rendering a chance, then picks the next task.
Do not say async means parallel execution on the main thread.
Queue priority
Promise callbacks and queueMicrotask are microtasks. Timers and user events are tasks. Microtasks drain before the next task and before rendering.
Do not treat promises as a background thread.
Pixels pipeline
HTML builds DOM, CSS builds CSSOM, both form the render tree, then layout, paint, and composite produce pixels.
Do not ignore render-blocking CSS, parser-blocking scripts, or LCP priority.
Browser object models
DOM represents document structure. CSSOM represents parsed style rules. The browser combines them to compute the render tree.
Do not say the DOM is what users see. Users see pixels after layout, paint, and compositing.
Rendering cost stages
Layout calculates geometry, paint records visuals, and compositing assembles layers. Reflow is layout recalculation after a geometry-affecting change.
Do not call every rendering problem a repaint. Separate layout, paint, and composite costs.
Client persistence choices
Use Web Storage for small string data, IndexedDB for large structured data, Cache Storage for request/response caching, and cookies for server-visible state.
Do not store sensitive tokens in localStorage without discussing XSS risk.
Browser-managed request state
Cookies are automatically sent with matching requests. HttpOnly blocks JS reads, Secure requires HTTPS, and SameSite controls cross-site sending.
Do not say HttpOnly prevents XSS; it only prevents cookie reads.
Interaction flow
Events move through capture, target, and bubble phases. Delegation attaches a listener to an ancestor and handles child events through target checks.
Do not confuse target with currentTarget or assume every event bubbles.
Discovery and execution
Classic scripts block parsing, defer preserves order after parsing, async executes when ready, and module scripts are deferred by default.
Do not use async for ordered dependencies or preload every resource.
Main-thread protection
Workers run JavaScript off the main thread and communicate with postMessage. They cannot directly access the DOM.
Do not move tiny work to workers without measuring message overhead.
Programmable request layer
Service workers run separately from the page, intercept fetches after activation, and can serve cache, network, or offline fallbacks.
Do not treat service workers like normal workers or cache every response with one rule.
Freshness and validation
Cache-Control defines storage and freshness. ETag and Last-Modified enable conditional requests that can return 304 without a body.
Do not confuse no-cache with no-store or put long immutable caching on HTML.
Browser read permission
CORS lets servers opt in to cross-origin response reads. The browser enforces it with allow headers and preflight checks.
Do not call CORS authentication or try to fix every CORS issue only in React.
Cancellation and correctness
Fetch resolves on HTTP responses, rejects on network or abort failures, and needs response.ok checks plus AbortController for stale work.
Do not assume fetch rejects on 404 or let old search results overwrite newer state.
Direction and latency
Polling pulls updates, SSE streams server-to-client events, and WebSockets provide bidirectional persistent messaging.
Do not choose WebSockets by default when SSE or polling satisfies the product need.
Real-user browser signals
Collect browser performance, errors, resources, interactions, and custom marks with route, device, release, and privacy context.
Do not rely only on Lighthouse or collect telemetry without a debugging use case.
Field attribution
LCP measures loading, INP responsiveness, and CLS visual stability. Debug with field data, route context, release, and attribution.
Do not stop at metric names or rely only on lab scores.
Dependency graph cost
Bundlers build dependency graphs, transform source, split chunks, tree-shake safe exports, and emit hashed browser assets.
Do not focus only on compressed size; parse and execution cost matter.
Trace evidence
Use browser traces to separate scripting, style recalculation, layout, paint, compositing, and frame presentation costs.
Do not call every visual problem a repaint or guess without a trace.
Retained references
Leaks happen when unused objects remain reachable. Compare heap snapshots and inspect retaining paths to find the reference.
Do not blame garbage collection when code still retains objects.
Safe rendering
Prevent XSS with safe rendering, context-aware encoding, sanitizer-controlled rich text, token protection, and CSP defense in depth.
Do not say React prevents all XSS or that CSP replaces sanitization.
Cross-site browser risk
CSRF abuses ambient cookies, clickjacking abuses framed UI, and isolation headers reduce cross-origin attack surface.
Do not confuse CORS with CSRF protection.
Semantic usable UI
Use semantic HTML, keyboard support, visible focus, labels, contrast, accessible errors, and careful ARIA.
Do not reduce accessibility to adding aria labels at the end.
Input lifecycle
Good forms combine semantic controls, client feedback, server validation, duplicate protection, accessible errors, and recovery.
Do not trust client validation or clear input after failed requests.
Right asset delivery
Use responsive candidates, dimensions, modern formats, CDN delivery, lazy loading for non-critical media, and priority for LCP.
Do not ship one huge image to every device or lazy-load the LCP image.
Global-ready UI
Use message catalogs, plural rules, locale formatting, RTL support, fallbacks, and text expansion testing.
Do not concatenate translated strings or assume English layout.
Shareable views
Put shareable, reloadable, restorable view state in the URL and use history updates that preserve back-button expectations.
Do not hide important filters only in memory or push history on every keystroke.
Restored navigation
bfcache stores a frozen page snapshot for instant back/forward navigation when the page avoids blockers.
Do not add unload handlers casually or assume every visit is a fresh load.
Reliable file workflows
Use native input fallback, validation, progress, cancellation, retry, accessible drop zones, and server-side enforcement.
Do not trust client validation or make drag-and-drop the only path.
Permission-aware UX
Clipboard, drag, and permission APIs need secure contexts, user gestures, feature detection, fallback UX, and privacy care.
Do not assume capability APIs always work or that permission is guaranteed.
Responsive motion
Use CSS transitions, keyframes, or WAAPI as needed; prefer transform and opacity; respect reduced motion.
Do not animate layout-heavy properties or ignore interruption.
Predictable styling
Manage cascade, layers, specificity, tokens, component boundaries, and override rules to avoid styling fights.
Do not solve every conflict with !important or high-specificity selectors.
Responsive layout
Use flexbox for one-dimensional layout, grid for two-dimensional layout, and intrinsic constraints for resilient responsive UI.
Do not build fixed layouts that break with long text, zoom, or localization.
Shared UI infrastructure
Design systems combine tokens, component contracts, accessibility rules, documentation, and governance.
Do not treat a component library alone as a design system.
Preference-aware tokens
Use semantic tokens, CSS variables, system preference, user override, persistence, and contrast checks.
Do not invert colors mechanically or ignore dark-mode states.
Fresh server state
Define cache keys, stale time, refetch triggers, invalidation, optimistic updates, rollback, and error recovery.
Do not treat server state like local UI state.
State ownership
Place state by owner and lifetime: local UI, server cache, URL, derived values, persistent settings, or global app state.
Do not duplicate sources of truth or put every value in a global store.
Graceful failure
Use boundaries, route fallbacks, async error states, retry UX, and logging so one failure does not blank the app.
Do not use one global error screen for every failure.
Confidence layers
Use unit, integration, E2E, accessibility, visual, contract, and monitoring checks according to user risk.
Do not chase snapshots while missing critical user flows.
Real browser flows
Use resilient locators, isolated data, traces, screenshots, and focused critical journeys for trustworthy E2E tests.
Do not rely on brittle selectors, sleeps, or giant all-in-one tests.
Static contracts
TypeScript models compile-time contracts, improves refactors, and catches invalid shapes, but runtime data still needs validation.
Do not claim TypeScript validates external JSON at runtime.
Safe branching
Use narrowing and discriminated unions to model valid UI states and protect refactors with exhaustive checks.
Do not model every state with optional fields.
Typed reuse
Generics preserve relationships between inputs and outputs, while utility types transform reusable contracts.
Do not over-genericize code until simple logic becomes unreadable.
Trust boundaries
Validate external data at runtime because TypeScript types are erased and cannot prove JSON shape.
Do not assign response.json directly to a trusted domain type.
Render vs commit
React renders components to compute UI, reconciles trees, and commits necessary host changes; keys preserve identity.
Do not say React replaces the whole DOM on every state update.
Ownership
Props pass data down, state owns changing local values, and clear source-of-truth choices prevent stale UI.
Do not copy props into state without a synchronization reason.
External sync
Effects synchronize React with external systems and need correct dependencies, cleanup, and stale async handling.
Do not use effects for pure derived values.
Measured optimization
Use memo, useMemo, and useCallback when profiler evidence shows meaningful render or calculation cost.
Do not wrap everything in memoization without measuring.
Input ownership
Controlled inputs are owned by React state; uncontrolled inputs are owned by the DOM and read when needed.
Do not force every field into React state when native behavior is enough.
Reusable UI contracts
Use children, slots, compound components, render props, and controlled APIs to keep reusable UI flexible.
Do not create giant boolean-prop configuration components.
Scoped shared values
Context shares values in a subtree; keep provider scope tight and values stable to avoid broad re-renders.
Do not put frequently changing large state in one global context.
Evidence-based fixes
Use React Profiler and browser traces to separate render cost, commit cost, layout, paint, and data processing.
Do not optimize React before measuring the real bottleneck.
Async boundaries
Suspense coordinates loading at boundaries; streaming progressively reveals useful UI before everything is ready.
Do not use one global spinner for every async operation.
Route architecture
App Router uses route segments, layouts, pages, loading/error files, Server Components, and intentional Client Components.
Do not mark broad layouts as client components without need.
Freshness vs speed
SSR is per request, SSG is build-time, ISR balances static speed with freshness, and hydration adds client cost.
Do not choose SSR for everything or ignore hydration cost.
Discoverability
Use crawlable semantic content, metadata, canonical URLs, social previews, structured data, sitemap, and performance.
Do not treat SEO as only title tags.
Session lifecycle
Handle login, restore, refresh, protected routes, storage trade-offs, logout cleanup, and secure error states.
Do not store sensitive long-lived tokens in JS-readable storage casually.
Capability-aware UI
Frontend reflects capabilities, while the backend enforces authorization. Prefer capability checks over scattered role checks.
Do not rely on hidden buttons as security.
Independent delivery
Micro frontends split ownership and deployment, but add integration, consistency, performance, and testing overhead.
Do not choose micro frontends only because the codebase is large.
Runtime composition
A host loads remote modules at runtime; shared dependencies, compatibility, fallbacks, and monitoring are critical.
Do not share every dependency blindly or ignore remote loading failure.
Package ownership
Monorepos need clear package boundaries, ownership, dependency rules, build caching, and affected tests.
Do not let shared packages become dumping grounds.
Safe releases
CI/CD validates, builds, previews, deploys, monitors, and supports rollback with traceable release metadata.
Do not treat deployment success as release success.
Portable runtime
Docker images package runtime dependencies; containers run images; frontend teams must separate public build config from runtime secrets.
Do not bake secrets into client bundles or containers.
Global asset delivery
CDNs cache assets near users; hashed assets can be immutable, while HTML and personalized data need careful freshness rules.
Do not cache personalized data or delete old chunks casually.
Controlled rollout
Flags decouple deploy from release and support targeting, experiments, progressive rollout, kill switches, and cleanup.
Do not leave stale flags forever or use client flags as authorization.
Complex app architecture
Design dashboards from users, data freshness, permissions, URL filters, caching, charts, tables, performance, and telemetry.
Do not start with components before clarifying data and scale.
Dense data UX
Use server/client operation rules, virtualization, accessible navigation, stable columns, URL state, and measured rendering.
Do not render thousands of rows without measuring DOM and interaction cost.
Resilient distributed UX
Offline-first needs local persistence, queued writes, idempotency, retry, conflict policy, and visible sync status.
Do not pretend offline sync is just localStorage plus retry.
Decision clarity
Explain context, options, constraints, trade-offs, recommendation, rollout, metric, and fallback.
Do not present only one option or hide uncertainty.
Evidence-based stories
Use context, constraints, action, trade-off, result, and reflection with measurable impact and honest ownership.
Do not list technologies without explaining decisions and impact.