System Design MCQs multiple-choice questions with answers & explanations

Answer: C (Abort the previous request, or ignore responses that don't match the latest query)

Debouncing reduces how many requests you send, but any two in-flight requests can still resolve out of order. Cancel the previous one (AbortController, or RxJS switchMap) or check that a response matches the latest query before rendering it. A cache makes repeat queries faster but doesn't fix ordering.

try it in the quiz →read the note →

Answer: B (Debouncing)

A debounce waits until events stop arriving for the given time and then fires once, which suits search inputs. A throttle fires at most once per interval while events keep coming, which suits scroll and resize handlers.

try it in the quiz →read the note →

Answer: A (aria-activedescendant on the input, set to the id of the highlighted option)

In the combobox pattern the input has role="combobox", aria-expanded and aria-controls pointing to a role="listbox", and aria-activedescendant names the active role="option" (which also gets aria-selected="true"). Focus never leaves the input, so the user can keep typing.

try it in the quiz →read the note →

Answer: D (INP)

Interaction to Next Paint (INP) replaced FID as a Core Web Vital in 2024. It looks at the latency of interactions throughout the visit; "good" is 200 ms or less at the 75th percentile. LCP measures loading and CLS visual stability, while TTFB is a diagnostic metric, not a Core Web Vital.

try it in the quiz →

Answer: B (Adding loading="lazy" to the hero image)

Native lazy loading holds the request back until layout shows the image is near the viewport, which delays the LCP. Lazy-load below-the-fold images only; the LCP image should be discoverable in the initial HTML, prioritized, and correctly sized.

try it in the quiz →

Answer: D (Set width and height (or CSS aspect-ratio) so space is reserved early)

With intrinsic dimensions the browser knows the aspect ratio and reserves the box, even with responsive CSS like width: 100%; height: auto. The same idea applies to ads, embeds and late banners: reserve their space up front.

try it in the quiz →

Answer: D (Split the work into chunks that yield to the main thread, or use a Web Worker)

INP measures the time from an interaction until the next frame is painted, and a long synchronous task blocks that paint. Yielding between chunks, virtualizing the list, rendering the results as a non-urgent update, or moving work to a worker all shorten the blocking time. The other options affect loading, not interaction latency.

try it in the quiz →

Answer: C (public, max-age=31536000, immutable)

The filename changes whenever the content does, so a given URL never changes and can be cached for a year without revalidation. The HTML that references the bundles should use no-cache (store it, but revalidate every time) so users pick up new hashes right after a deploy. no-store disables caching entirely.

try it in the quiz →

Answer: B (The cached response is served immediately and the CDN revalidates it with the origin in the background)

For the first 60 seconds the response is fresh. Between 60 and 360 seconds (max-age plus the stale-while-revalidate window) it's stale but may be served instantly while the cache refreshes it asynchronously. After that, a blocking request to the origin is required.

try it in the quiz →

Answer: D (Marking the session cookie HttpOnly)

CSRF works because the browser attaches cookies to the forged request automatically; the attacker never needs to read the cookie. HttpOnly only stops JavaScript from reading it, which limits session theft via XSS but does nothing against CSRF.

try it in the quiz →

Answer: B (script-src 'self')

Without 'unsafe-inline', CSP blocks inline scripts and inline event handlers, and 'self' allows scripts from your own origin. default-src 'none' would block your bundle too, and frame-ancestors only controls who may embed the page. If you need specific inline scripts, allow them with a nonce or hash. CSP is defense in depth: you still escape output.

try it in the quiz →

Answer: B (Assigning it to element.innerHTML)

innerHTML parses the string as HTML, so a payload like an img tag with an onerror handler runs attacker code. The same applies to React's dangerouslySetInnerHTML and Angular's bypassSecurityTrust* APIs. If you must render user HTML, sanitize it with a library such as DOMPurify.

try it in the quiz →

Answer: A (Cursor pagination: fetch the items after the last loaded item's id)

With offsets, inserting items at the top shifts every page, so the next page repeats items (and deletions make you skip some). A cursor anchors the next page to a stable position in the ordered list, and it is also cheaper for the database than large offsets.

try it in the quiz →

Answer: C (An IntersectionObserver watching a sentinel element near the list end)

IntersectionObserver reports visibility changes asynchronously, off the scroll hot path, so it avoids forced layouts on every scroll event. A rootMargin like 600px starts fetching before the user reaches the bottom. Also keep the footer reachable and offer a Load more fallback.

try it in the quiz →

Answer: D (Virtualize the list so only the visible items plus a small buffer exist in the DOM)

DOM size drives style, layout and memory costs, and virtualization keeps a few dozen nodes mounted regardless of list length (react-window, TanStack Virtual, Angular CDK virtual scroll). Trade-offs: variable heights must be measured, and browser find-in-page and screen readers only see mounted items. content-visibility: auto is a lighter alternative.

try it in the quiz →

Answer: B (Server-Sent Events (EventSource))

SSE is a one-way stream over HTTP with reconnection built into EventSource, and it can resume using Last-Event-ID. WebSockets are the better choice when the client also sends frequent messages (chat, multiplayer), but you implement reconnection and heartbeats yourself.

try it in the quiz →

Answer: C (Give each message a client id for idempotent retries; order by a server sequence number)

The server dedupes on the client id, so retrying is safe, and the client swaps its optimistic "sending" bubble for the confirmed message when the ack with that id arrives. Device clocks are skewed, so order should come from the server; sequence numbers also reveal gaps, which the client fetches after reconnecting.

try it in the quiz →

Answer: A (Exponential backoff with random jitter, capped at a maximum delay)

Exponential backoff spreads retries out while failures continue, and jitter desynchronizes clients so they don't all retry at the same instant. Also pause retries while the browser reports being offline and reconnect on the online event.

try it in the quiz →

Answer: C (The search query, filters and current page of a product list)

State in the URL is shareable, bookmarkable, and survives reloads and back/forward navigation, which is exactly what users expect for search and filters. Ephemeral UI state stays local, and secrets never go in URLs because they end up in history, logs and Referer headers.

try it in the quiz →

Answer: D (Incremental static regeneration: serve cached pages, regenerate in the background)

ISR keeps the speed of static pages but regenerates each page after a revalidation window or when a webhook fires, so no full rebuild is needed; SSR behind a CDN with short cache lifetimes is a similar option. CSR hurts SEO and LCP, uncached SSR pays the rendering cost on every hit, and full SSG can't keep up with frequent changes across that many pages.

try it in the quiz →

Answer: B (The main content arrives first; the slow section streams in when its data is ready)

Classic SSR waits for all data before sending any HTML, so TTFB and FCP inherit the slowest dependency. Streaming flushes HTML progressively, with a fallback where the slow section will go, and frameworks can hydrate sections independently as they arrive.

try it in the quiz →

Answer: C (To let autonomous teams build and deploy parts of a large app independently)

Micro-frontends are an organizational scaling tool. They usually cost performance (duplicated dependencies, extra requests), consistency (design drift) and complexity (routing, shared state, versioning), so they pay off when team independence is the real bottleneck, not for a single small team.

try it in the quiz →

Answer: B (Share react and react-dom as singletons in the federation config)

Hooks break when a component is rendered by one copy of React but calls hooks from another. The shared config with singleton: true (and a compatible requiredVersion) makes everyone load one instance, which also avoids downloading React twice. The same applies to other libraries with module-level state, like routers and stores.

try it in the quiz →

Answer: D (Network first, falling back to the cache)

Network-first tries the network (often with a timeout), updates the cache on success, and falls back to the cached response when offline. Cache-first suits versioned static assets and the app shell; stale-while-revalidate suits resources where slightly stale is fine, like avatars.

try it in the quiz →

Answer: A (IndexedDB)

IndexedDB is asynchronous, stores structured data and Blobs, supports indexes and transactions, and has much larger quotas. localStorage is synchronous (it blocks the main thread), stores only strings and is limited to a few megabytes; cookies are sent with every request.

try it in the quiz →

Answer: C (Use ICU plural messages or Intl.PluralRules; plural rules differ by language)

Plural rules vary widely: Arabic has six categories, Polish distinguishes 'few' and 'many', and Japanese has a single form. An ICU message like {count, plural, one {# file} other {# files}} lets translators handle each locale, and avoiding concatenation keeps word order translatable.

try it in the quiz →

Answer: A (Use logical properties like margin-inline-start, and set dir="rtl")

Logical properties follow the writing direction, so one stylesheet works for both LTR and RTL once dir is set. Directional icons, such as back arrows, usually need mirroring too, while text itself should never be flipped with transforms.

try it in the quiz →

Answer: D (navigator.sendBeacon() when visibilitychange reports the page as hidden)

On mobile, unload and beforeunload often don't fire because the page is backgrounded and then discarded, and unload listeners can also prevent the back/forward cache. The switch to hidden is the last event you can rely on, and sendBeacon (or fetch with keepalive: true) requests are allowed to outlive the page.

try it in the quiz →

Answer: B (Upload source maps to the error tracker for each release, without serving them publicly)

The error tracker uses the uploaded maps, matched by release, to de-minify stack traces. Serving .map files publicly also works but exposes your source. Tagging errors with release, route and browser makes regressions after a deploy easy to spot.

try it in the quiz →

Answer: C (Field data from real users (RUM or CrUX), segmented by device, at the 75th percentile)

Lighthouse is a lab test on one simulated device and network, so it misses real devices, networks, caches and interactions (it can't measure INP at all). Core Web Vitals are assessed on field data at the 75th percentile. Collect RUM (for example with the web-vitals library) segmented by device class, and use lab tools to debug what it reveals.

try it in the quiz →

Answer: D (A visible pause control, pausing on focus and hover, and honoring reduced motion)

WCAG requires a way to pause, stop or hide moving content that starts automatically and lasts more than five seconds. Respect prefers-reduced-motion, label the slides (e.g. 'Slide 2 of 5'), make the controls keyboard-operable, and never move focus automatically when slides change.

try it in the quiz →

Answer: A (Use srcset with width descriptors plus sizes, so the browser picks a file)

With srcset="hero-800.jpg 800w, hero-1600.jpg 1600w, hero-2400.jpg 2400w" and sizes="(min-width: 1024px) 50vw, 100vw", the browser accounts for layout width and pixel density before downloading. Use picture for art direction or format fallbacks. CSS resizing still downloads the full file.

try it in the quiz →

Answer: D (Expose design tokens as CSS custom properties that components reference, so apps override the variables at runtime)

CSS variables cascade and can change at runtime, for example under a [data-theme="dark"] selector or a prefers-color-scheme media query, so one build supports any theme. Semantic token names like --color-surface keep themes consistent across components.

try it in the quiz →

Answer: C (Send the CSP directive frame-ancestors 'none' (or X-Frame-Options: DENY))

frame-ancestors tells the browser which origins may embed the page: 'none' forbids framing entirely and 'self' allows only your own origin. X-Frame-Options is the older header with the same purpose. HTTPS and HttpOnly protect other things.

try it in the quiz →