Junior Frontend System Design Interview Questions (50 MCQs)

Question 1

Which metrics are Core Web Vitals?

Accepted Answer

LCP, INP, CLS

Answer

Only game FPS

Answer

Only lines of code

Answer

Only server CPU temperature

Question 2

What is the main frontend role of a CDN?

Accepted Answer

Caching assets near users for lower latency

Answer

Writing business logic on the client

Answer

Fully replacing the database

Answer

Removing HTTPS

Question 3

Which approach reduces bundle size?

Accepted Answer

Code splitting and tree-shaking

Answer

Adding every polyfill whether needed or not

Answer

Always importing all of lodash

Answer

Disabling compression

Question 4

Which files suit `Cache-Control: max-age=31536000, immutable`?

Accepted Answer

Hashed assets like `app.3f9a.js`

Answer

The main HTML file

Answer

User API responses

Answer

The login page

Question 5

What does `loading="lazy"` on `<img>` do?

Accepted Answer

Defers download until the image nears the viewport

Answer

Lowers image quality

Answer

Generates the image later on the server

Answer

Disables caching

Question 6

What does minification do?

Accepted Answer

Removes whitespace/comments and shortens names to cut size

Answer

Encrypts code for security

Answer

Converts JS to WebAssembly

Answer

Removes used code

Question 7

What does HTTPS protect against?

Accepted Answer

Eavesdropping and tampering in transit (man-in-the-middle)

Answer

All XSS attacks

Answer

Server logic bugs

Answer

DDoS attacks

Question 8

Main client-side advantage of GraphQL over REST?

Accepted Answer

The client requests exactly the needed fields in one request

Answer

Always faster than REST

Answer

No server needed

Answer

Simpler HTTP caching

Question 9

Why debounce a live search input?

Accepted Answer

To cut server requests while typing

Answer

To make search more secure

Answer

To save into localStorage

Answer

Because browsers require it

Question 10

What exactly does LCP measure?

Accepted Answer

When the largest visible image or text block in the viewport renders

Answer

When all JavaScript files of the page finish downloading

Answer

The total number of network requests until `load`

Answer

The server response time for the first API request

Question 11

What is the most common cause of high CLS on an image-heavy page?

Accepted Answer

Images without `width` and `height` or `aspect-ratio`

Answer

Using WebP instead of JPEG

Answer

Having gzip compression enabled on the server

Answer

Serving images through a CDN

Question 12

Which aspect of user experience does INP measure?

Accepted Answer

How quickly the page visually responds to clicks, taps and typing

Answer

How long it takes to paint the first pixel

Answer

How much elements shift unexpectedly during load

Answer

The total memory used by the browser tab

Question 13

What does TTFB refer to?

Accepted Answer

Time from starting the request until the first response byte arrives

Answer

Time until the first JavaScript function executes

Answer

Time until the first custom font renders

Answer

Time required to fully load all images

Question 14

What is the benefit of enabling Brotli or gzip on the server?

Accepted Answer

Smaller transfer size for text files like HTML, CSS and JS

Answer

Reduced JavaScript execution time in the browser

Answer

Further compression of JPEG and PNG images

Answer

Encrypting responses instead of using HTTPS

Question 15

When the browser sends `If-None-Match` and gets `304 Not Modified`, what happened?

Accepted Answer

The cached copy is still valid and the body is not resent

Answer

The file was deleted on the server and must be evicted

Answer

The server redirected the request to another URL

Answer

The user lacks permission to fetch the file

Question 16

For an API response with a user's banking data, which header fits best?

Accepted Answer

`Cache-Control: no-store`

Answer

`Cache-Control: public, max-age=86400`

Answer

`Cache-Control: max-age=31536000, immutable`

Answer

`Cache-Control: s-maxage=3600`

Question 17

What is HTTP/2's most important improvement over HTTP/1.1 for frontends?

Accepted Answer

Sending many requests concurrently over one connection (multiplexing)

Answer

Removing the need for TLS on all sites

Answer

Running JavaScript on the server instead of the browser

Answer

Automatically caching all responses without headers

Question 18

When a user first enters a site's address, what is DNS's role?

Accepted Answer

Translating the domain name into the server's IP address

Answer

Encrypting the connection between browser and server

Answer

Compressing HTML files before sending

Answer

Validating the username and password

Question 19

What does `<link rel="preconnect" href="https://fonts.example.com">` do?

Accepted Answer

Sets up DNS, TCP and TLS to that origin early

Answer

Downloads every file from that origin in advance

Answer

Exempts that origin from the page's CSP

Answer

Delays requests to that origin until after `load`

Question 20

What is the main difference between `

Accepted Answer

`defer` runs in order after HTML parsing; `async` runs as soon as it downloads

Answer

`defer` runs only on the server and `async` only in the browser

Answer

`async` disables caching while `defer` enables it

Answer

`defer` doesn't download the script until user interaction

Question 21

Why can a large CSS file in `<head>` slow down the first render?

Accepted Answer

CSS is render-blocking by default, so the browser waits for it

Answer

CSS must be compiled on the server before use

Answer

Browsers read CSS only after running all scripts

Answer

CSS cannot use the HTTP cache

Question 22

What does CORS control in the browser?

Accepted Answer

Whether JavaScript on one origin may read responses from another origin

Answer

Whether a user is allowed to log in to the site

Answer

Whether the server supports HTTP/2

Answer

Whether files are served from the CDN or the origin

Question 23

What is the difference between status codes `401` and `403`?

Accepted Answer

`401` means not authenticated; `403` means known but not permitted

Answer

`401` means page not found; `403` means server error

Answer

`401` means too many requests; `403` means timeout

Answer

Both mean exactly the same and are interchangeable

Question 24

Which HTTP methods are idempotent by definition?

Accepted Answer

`GET`, `PUT` and `DELETE`

Answer

Only `POST`

Answer

`POST` and `PATCH`

Answer

No method is idempotent

Question 25

What is the main difference between `localStorage` and `sessionStorage`?

Accepted Answer

`sessionStorage` is cleared when the tab closes and isn't shared across tabs

Answer

`localStorage` is stored only on the server

Answer

`sessionStorage` sends data to the server with every request

Answer

`localStorage` is encrypted automatically

Question 26

Which statement about the payload of a typical JWT (JWS) is true?

Accepted Answer

It is only Base64URL-encoded and anyone can read it

Answer

It is encrypted with the server key and unreadable

Answer

Only the browser that created it can decode it

Answer

It changes automatically after every request

Question 27

What is the risk of rendering a user comment with `element.innerHTML = comment`?

Accepted Answer

XSS: malicious code in the comment runs in other users' browsers

Answer

Direct SQL injection into the server database

Answer

Slower DNS lookups for the whole page

Answer

Breaking the browser cache for that page

Question 28

What does a CSRF attack exploit?

Accepted Answer

The browser auto-sending cookies with a request forged by another site

Answer

The attacker site directly reading the victim's `localStorage`

Answer

Guessing the user's password by repeated attempts

Answer

Sniffing traffic on public Wi-Fi

Question 29

Why shouldn't a secret payment API key go in a client-side env var (like `NEXT_PUBLIC_*`)?

Accepted Answer

Its value is inlined into the bundle and visible to everyone

Answer

Because env vars don't work in production

Answer

Because it massively increases bundle size

Answer

Because browsers block environment variables

Question 30

What problem does `srcset` on `<img>` solve?

Accepted Answer

The browser picks a suitable image size for the screen and pixel density

Answer

It automatically converts the image to SVG

Answer

It prevents users from saving the image

Answer

It shows the image only after JavaScript runs

Question 31

Why are formats like AVIF and WebP recommended for site photos?

Accepted Answer

They're smaller than JPEG and PNG at similar quality

Answer

They're the only formats that display on mobile

Answer

They don't need downloading and are generated in HTML

Answer

They are always lossless

Question 32

What behavior does `font-display: swap` in `@font-face` cause?

Accepted Answer

Text shows immediately in a fallback font, then swaps to the web font

Answer

Text stays fully hidden until the web font downloads

Answer

The font is rendered on the server instead of the browser

Answer

The font downloads only when the user scrolls

Question 33

What is the main advantage of SSR over full client-side rendering (CSR)?

Accepted Answer

Ready HTML shows sooner and is better for SEO

Answer

No JavaScript is ever sent to the browser

Answer

Server load is always lower than with CSR

Answer

It removes the need for APIs and databases

Question 34

Static generation (SSG) fits which page best?

Accepted Answer

A docs or blog page whose content rarely changes

Answer

Each user's personal shopping cart

Answer

A live stock price dashboard

Answer

A search results page with arbitrary filters

Question 35

For one-way server-to-browser notifications (like order status), which is a simple standard option?

Accepted Answer

Server-Sent Events via `EventSource`

Answer

Submitting an HTML form every second

Answer

Storing the status in `localStorage`

Answer

Using `postMessage` between tabs

Question 36

What is the main downside of short polling (a request every few seconds) for rarely-changing data?

Accepted Answer

Most requests return nothing and waste server load and battery

Answer

Browsers block polling entirely

Answer

Polling only works on HTTP/1.0

Answer

Data always arrives minutes late

Question 37

What is a Service Worker?

Accepted Answer

A script separate from the page that can intercept and cache network requests

Answer

A thread that renders CSS faster

Answer

A small server running on the CDN

Answer

An extension the user must install manually

Question 38

What role does the Web App Manifest (`manifest.json`) play in a PWA?

Accepted Answer

Defines name, icons, colors and display mode for installing the app

Answer

Lists all of the project's npm dependencies

Answer

Directly executes network caching rules

Answer

Documents the backend API routes

Question 39

For a Persian page, which setting on `<html>` is correct?

Accepted Answer

`<html lang="fa" dir="rtl">`

Answer

`<html lang="en" dir="ltr">`

Answer

`<html style="text-align:right">` without `lang`

Answer

`<html translate="no">` alone

Question 40

What is the best way to display prices and dates per user locale in the browser?

Accepted Answer

Using `Intl.NumberFormat` and `Intl.DateTimeFormat`

Answer

Hand-writing a separate function per country

Answer

Converting everything with `toString()`

Answer

Always showing the US format to everyone

Question 41

For a purely decorative image, what should `alt` be?

Accepted Answer

An empty `alt=""` so screen readers skip it

Answer

The file name, like `bg-pattern.png`

Answer

The word `image` for every image

Answer

The `alt` attribute should be omitted entirely

Question 42

Why is `<button>` better than `<div onClick>` for a clickable control?

Accepted Answer

It has keyboard focus, Enter/Space activation and a role built in

Answer

`<button>` downloads faster than `<div>`

Answer

`

` can't receive clicks on mobile browsers

Answer

`<button>` automatically caches requests to the server

Question 43

What are source maps used for in production?

Accepted Answer

Mapping errors in minified code back to original files and lines

Answer

Reducing the final bundle size

Answer

Speeding up JavaScript execution

Answer

Encrypting code to prevent copying

Question 44

What is the benefit of showing a skeleton instead of a spinner while loading?

Accepted Answer

Better perceived speed and the content's space is reserved upfront

Answer

Data actually arrives faster from the server

Answer

It removes the need for error handling

Answer

It significantly reduces bundle size

Question 45

For a `scroll` handler that computes positions, which technique fits?

Accepted Answer

Throttling or using `requestAnimationFrame`

Answer

Running heavy work on every event without limits

Answer

Adding several identical listeners to be safe

Answer

Calling `alert` on every scroll

Question 46

When an API returns `429 Too Many Requests`, what should the client do?

Accepted Answer

Slow down and retry after the `Retry-After` time

Answer

Immediately repeat the request in a loop

Answer

Log the user out of their account

Answer

Clear the browser cache completely

Question 47

What is the main goal of CI (Continuous Integration) in a frontend project?

Accepted Answer

Automatically running lint, tests and build on every push or pull request

Answer

Automatically writing new code for developers

Answer

Designing the UI without a designer

Answer

Fully replacing human code review

Question 48

What is the benefit of a preview deployment per pull request?

Accepted Answer

The team can review changes on a real URL before merging

Answer

Changes go live to all production users immediately

Answer

It completely removes the need for tests

Answer

It reduces production server costs to zero

Question 49

Why is latency often more important than bandwidth for a page with dozens of small requests?

Accepted Answer

Each round-trip has a fixed delay that more bandwidth doesn't reduce

Answer

Bandwidth only affects image downloads

Answer

Latency is measured only on the server

Answer

Small files are always read from cache

Question 50

When fetching data from an API fails, what is the best UI behavior?

Accepted Answer

Show a clear error message with a retry button

Answer

Show a blank white page with no explanation

Answer

Show an endless spinner forever

Answer

Auto-reload the whole page in a loop

Frontend System Design · Junior · 50

Which metrics are Core Web Vitals?