Middle Frontend System Design Interview Questions (50 MCQs)

Question 1

What is a common SPA strength?

Accepted Answer

Fast client-side navigation without full reloads

Answer

Always better SEO than MPA with zero work

Answer

Zero JavaScript

Answer

No need for routing

Question 2

For sensitive access tokens, which approach is safer?

Accepted Answer

HttpOnly Secure cookies (and/or memory + refresh)

Answer

Storing in localStorage with no protection

Answer

Always putting the token in the URL

Answer

Logging the token to the console

Question 3

When are micro-frontends more justified?

Accepted Answer

Independent teams and a very large codebase

Answer

Always for a tiny one-page landing

Answer

When you have one developer and want extra complexity

Answer

Never at any scale

Question 4

Which fits real-time two-way chat best?

Accepted Answer

WebSocket

Answer

Polling every 10s

Answer

Server-Sent Events

Answer

Email

Question 5

Best approach for retrying failed requests?

Accepted Answer

Exponential backoff with jitter and a retry cap

Answer

Immediate, endless retries

Answer

Never retry

Answer

Full page reload

Question 6

Why is cursor pagination better than offset for feeds?

Accepted Answer

No duplicates or skips when new items are inserted

Answer

It's always simpler to implement

Answer

It enables jumping straight to page 50

Answer

Needs no DB index

Question 7

What do tools like Sentry do on the frontend?

Accepted Answer

Capture real-user errors with stack traces (via source maps) and context

Answer

Automated unit testing

Answer

Image compression

Answer

State management

Question 8

How do feature flags help?

Accepted Answer

Decoupling deploy from release, gradual rollout, and quick kill switches

Answer

Removing the need for tests

Answer

Automatically shrinking the bundle

Answer

Encrypting code

Question 9

How do you ensure users get new JS after a deploy?

Accepted Answer

Content-hashed filenames

Answer

Ask users to clear cache

Answer

Disable caching entirely

Answer

Change domain every deploy

Question 10

How does `Cache-Control: max-age=60, stale-while-revalidate=300` behave?

Accepted Answer

Fresh for 60s; for 5 more minutes the stale copy is served instantly while revalidating in the background

Answer

Not cached for 60s, then cached for 5 minutes

Answer

After 60s the user must wait for a fresh response

Answer

Only the CDN caches it and the browser ignores it

Question 11

What effect does `Vary: Accept-Encoding` have on caching?

Accepted Answer

The cache stores a separate copy per `Accept-Encoding` value

Answer

It completely disables caching for that response

Answer

It forces compression for every client

Answer

It makes the CDN strip request headers

Question 12

For updating static files on a CDN, why are versioned URLs usually better than purging?

Accepted Answer

Purges aren't instant or guaranteed across edges and browser caches; new URLs avoid that

Answer

CDN purges are always expensive and forbidden

Answer

Versioned URLs reduce file size

Answer

CDNs don't support purging

Question 13

Which HTTP/2 problem does HTTP/3 (over QUIC) solve better on lossy networks?

Accepted Answer

TCP-level head-of-line blocking that stalled all streams

Answer

HTTP/2's lack of header compression

Answer

HTTP/2's inability to multiplex

Answer

HTTP/2 needing a separate connection per file

Question 14

What is the difference between `rel="preload"` and `rel="prefetch"`?

Accepted Answer

preload is high-priority for the current page; prefetch is low-priority for a likely next navigation

Answer

preload is only for images and prefetch only for fonts

Answer

preload executes the resource while prefetch only resolves DNS

Answer

They're identical apart from the name

Question 15

The hero image is a CSS `background-image` and LCP is poor. What is the main cause?

Accepted Answer

The browser can't discover the image until the CSS is downloaded and parsed

Answer

Background images are never counted for LCP

Answer

CSS doesn't allow image compression

Answer

Background images always download uncached

Question 16

Clicking a filter on a large list takes 400ms to update the UI. What best improves INP?

Accepted Answer

Paint immediate feedback and break heavy work into chunks that yield

Answer

Process the whole list in one bigger synchronous function

Answer

Simulate the click event with `setInterval`

Answer

Increase the number of fonts on the page

Question 17

Even with `font-display: swap`, the font swap still causes CLS. What is a more precise fix?

Accepted Answer

Tune the fallback with `size-adjust` and `ascent-override` to match the web font's metrics

Answer

Remove the fallback font from `font-family` entirely

Answer

Load the font with JavaScript after the `load` event

Answer

Convert the font into a PNG image

Question 18

A third-party chat widget ships about 500KB of JS and hurts INP. What is a good approach?

Accepted Answer

Show a lightweight facade and load the real script only on user interaction

Answer

Put the script synchronously in `<head>` so it's ready sooner

Answer

Load the script twice to make sure it works

Answer

Disable CSP so the script runs faster

Question 19

An SSR page waits on a slow 2s API for a recommendations section. How does streaming SSR with Suspense help?

Accepted Answer

The rest of the HTML is sent immediately and that section streams in later in the same response

Answer

It automatically makes the slow API faster

Answer

It removes that section from the page permanently

Answer

It converts the page into full client-side rendering

Question 20

A content site with SSR has good LCP but poor INP and TBT. What is the likely cause?

Accepted Answer

Heavy hydration of the whole page with lots of JS, even for non-interactive parts

Answer

The server-sent HTML is too small

Answer

The CDN is caching the HTML files

Answer

The page's images are in AVIF

Question 21

For a store's 100k product pages whose prices change a few times a day, which approach is most balanced?

Accepted Answer

Static rendering with timed or on-demand revalidation after price changes

Answer

A full rebuild of all 100k pages after every price change

Answer

Full client-side rendering with no initial HTML

Answer

SSR with no cache on every request

Question 22

Rendering runs at the edge near users, but the database is in one region and the page makes 4 sequential queries. What happens?

Accepted Answer

Each query makes a long round-trip and it can be slower than rendering near the database

Answer

The edge automatically caches and parallelizes all queries

Answer

Latency drops to zero because the edge is near the user

Answer

The database replicates to every edge automatically

Question 23

The web and mobile apps build each screen from 6 calls to different microservices. How does the BFF pattern help?

Accepted Answer

A per-client server layer aggregates and shapes data for that client's needs

Answer

It merges all microservices into a single database

Answer

It removes the need for authentication

Answer

It connects the client directly to the database

Question 24

A parent fetches data and its children start their own fetches only after rendering. What's the problem?

Accepted Answer

A request waterfall: independent requests run serially instead of in parallel

Answer

The requests are never cached

Answer

CORS doesn't apply to child requests

Answer

The bundle size automatically doubles

Question 25

Several components on a page need the user profile at once. What do libraries like TanStack Query or SWR offer?

Accepted Answer

Deduping concurrent requests via a shared cache key with controlled revalidation

Answer

Permanently storing data in the server database

Answer

Removing the need for an API for user data

Answer

Automatically converting REST into WebSocket

Question 26

When implementing an optimistic update for a like button, what is essential?

Accepted Answer

Keeping the previous snapshot and rolling back if the request fails

Answer

Waiting for the server response before updating the UI

Answer

Disabling error handling for extra speed

Answer

Fully reloading the page after every click

Question 27

A user quickly switches between "Orders" and "Payments" tabs and sometimes sees the previous tab's data. Cause and fix?

Accepted Answer

A response race; cancel the old request with `AbortController` or ignore stale responses

Answer

The browser cache is broken; disable all caching

Answer

The server is slow; increase the timeout

Answer

It's a CSS issue; change the `z-index`

Question 28

For a live log dashboard where the client only receives data and sits behind corporate proxies, why is SSE a good choice?

Accepted Answer

It runs over plain HTTP with automatic reconnect and `Last-Event-ID`

Answer

It supports binary data more efficiently than WebSocket

Answer

It lets the client send messages to the server on the same channel

Answer

It needs no server and is peer-to-peer

Question 29

A chat app's WebSocket drops for 30s then reconnects. What prevents lost messages?

Accepted Answer

Send the last received ID or sequence and fetch missed messages from the server

Answer

Assume no messages were sent in the meantime

Answer

Reload the page so everything loads from scratch

Answer

Leave the connection closed forever without reconnecting

Question 30

What security benefit does refresh token rotation provide?

Accepted Answer

Each refresh token is single-use, so reuse of a stolen token is detected

Answer

It keeps the access token valid forever

Answer

It removes the need for HTTPS

Answer

It sends the user's password with every request

Question 31

The access token expired and 5 concurrent requests get `401`. What's the correct interceptor design?

Accepted Answer

Run a single refresh; other requests await that same Promise, then retry

Answer

Have every request call refresh independently

Answer

Drop all requests and show an error

Answer

Log the user out immediately

Question 32

A session cookie is set with `SameSite=Lax`. Which cross-site request still sends it?

Accepted Answer

A top-level `GET` navigation, like clicking a link from another site

Answer

A `POST` form submission from another site

Answer

A `fetch` request from another site

Answer

Loading the page inside an `<iframe>` on another site

Question 33

Every API call with an `Authorization` header is preceded by an `OPTIONS` request, doubling latency. What's a good fix?

Accepted Answer

Set `Access-Control-Max-Age` to cache preflights, or serve the API from the same origin

Answer

Drop the `Authorization` header and put the token in the query string

Answer

Set `Access-Control-Allow-Origin: *` with credentials

Answer

Disable CORS in users' browsers

Question 34

What does Subresource Integrity (the `integrity` attribute on `<script>`) protect against?

Accepted Answer

Running a file on a public CDN that was tampered with and whose hash changed

Answer

CSRF attacks on site forms

Answer

Slow downloads from a distant CDN

Answer

XSS from user input

Question 35

To prevent clickjacking on an account settings page, which header fits?

Accepted Answer

`Content-Security-Policy: frame-ancestors 'self'`

Answer

`Access-Control-Allow-Origin: *`

Answer

`Cache-Control: public`

Answer

`Referrer-Policy: unsafe-url`

Question 36

In a Service Worker, which caching strategy mix is usually right?

Accepted Answer

Network-first for HTML and cache-first for hashed assets

Answer

Cache-first for HTML and network-only for hashed assets

Answer

Cache-only for personal user API responses

Answer

Network-only for everything so data is always fresh

Question 37

After deploying a new version, PWA users still see the old one. What's a common cause?

Accepted Answer

The new Service Worker stays `waiting` until all old tabs close

Answer

The CDN cached files forever and they can't change

Answer

Browsers update Service Workers only once a year

Answer

PWAs can't update and must be reinstalled

Question 38

For storing 50MB and thousands of queryable records offline, why is IndexedDB better than `localStorage`?

Accepted Answer

It has more capacity, an async API, indexes and structured storage

Answer

It automatically syncs data with the server

Answer

It sends data to the server with every HTTP request

Answer

Its data is never evicted by the browser

Question 39

Why is building text with `count + " item" + (count > 1 ? "s" : "")` a problem for a multilingual app?

Accepted Answer

Languages have different plural rules; use ICU MessageFormat or `Intl.PluralRules`

Answer

Because string concatenation is slow in JavaScript

Answer

Because numbers can't be placed inside strings

Answer

Because only English has plurals

Question 40

To support RTL and LTR without two CSS files, which approach is best?

Accepted Answer

Use logical properties like `margin-inline-start` and `padding-inline-end`

Answer

Use `margin-left` and flip it manually with JavaScript

Answer

Flip the whole page with `transform: scaleX(-1)`

Answer

Use `position: absolute` for every element

Question 41

The translations for 12 languages and the whole app total 800KB and sit in the main bundle. What's better?

Accepted Answer

Load only the active locale and split translations by route or namespace

Answer

Store all languages in `localStorage`

Answer

Generate translations at runtime with a machine translation API

Answer

Reduce the number of languages to one

Question 42

The team added axe to CI and it reports zero issues. What can you conclude?

Accepted Answer

Only part of the issues are covered; keyboard and screen reader testing are still needed

Answer

The site is fully accessible and WCAG compliant

Answer

Semantic HTML is no longer needed

Answer

axe guarantees all contrast and focus issues are handled

Question 43

A component library shared by 15 teams must change a component's prop. What's the right approach?

Accepted Answer

Deprecate with warnings, ship a semver major, and provide a codemod

Answer

Change it silently in a patch release

Answer

Copy the component separately for each team

Answer

Freeze the library and never change it

Question 44

CI in a 30-package monorepo takes 25 minutes, even for one-line changes. What helps most?

Accepted Answer

Run only affected packages and cache task outputs (e.g. Turborepo or Nx)

Answer

Remove all tests from CI

Answer

Build every package twice to be safe

Answer

Split the monorepo into one repo per file

Question 45

After each deploy, some users with open tabs get `ChunkLoadError` when navigating. Why?

Accepted Answer

The previous build's chunks were removed and the old app version requests them

Answer

Users' browsers don't support ES modules

Answer

The CDN published new files too quickly

Answer

The chunks are too small for HTTP/2

Question 46

When setting up frontend error monitoring for a high-traffic app, which setting matters?

Accepted Answer

Event sampling, release tags and scrubbing PII before sending

Answer

Sending full form contents and passwords for better debugging

Answer

Logging every mousemove event as an error

Answer

Disabling source maps to cut cost

Question 47

The app's JS grew 40% over a year without anyone noticing. What's the best prevention?

Accepted Answer

A performance budget in CI that fails PRs exceeding the limit

Answer

Manually checking bundle size once a year

Answer

Removing all third-party libraries

Answer

Increasing the server timeout

Question 48

A card image is 300px wide on desktop, but with `srcset` (no `sizes`) the 1600px variant downloads. Why?

Accepted Answer

Without `sizes` the browser assumes the image is `100vw` wide

Answer

Browsers always pick the largest `srcset` candidate

Answer

`srcset` only works on mobile

Answer

The CDN removed the small image

Question 49

What is the benefit of a canary release for a big frontend change?

Accepted Answer

The new version reaches a small percentage first, then expands or rolls back based on metrics

Answer

The new version goes to all users at once

Answer

It removes the need for testing before release

Answer

Old code is immediately deleted from all servers

Question 50

Sometimes a "Submit" button stays loading forever because a `fetch` never responds. What's the right fix?

Accepted Answer

Set an explicit timeout with `AbortSignal.timeout()` and show a retryable error

Answer

Rely on `fetch`'s short default timeout

Answer

Remove the loading state from the button

Answer

Send the same request 10 times concurrently

Frontend System Design · Middle · 50

What is a common SPA strength?