All 75 Frontend Core quiz questions below come with a short explanation, visible right on the page — no sign-in needed. They're grouped by beginner and intermediate levels and 15 subtopics, so you can revise one part at a time. Choose Try Frontend Core quiz above to take a scored run and review the questions you got wrong.
What the Frontend Core quiz covers
Browser & Network15
Practical Flows10
Rendering9
Performance6
Accessibility5
Build & Bundle5
CSS5
Web Security5
Auth & Token4
HTTP4
HTML2
Web Vitals2
Mobile1
Security1
Browser1
Beginner level — 20 Frontend Core questions
Question 1·Browser & Network
How do cookies, localStorage and sessionStorage differ?
A.All three are sent automatically with every HTTP request to the same domain, making them equivalent security-wise
B.Only cookies are sent automatically with requests; sessionStorage dies with the tab, localStorage does not
C.Cookies hold more data than localStorage so they suit caching API data
D.localStorage is cleared when the tab closes while sessionStorage lasts forever
Answer: B
Cookies are about 4KB, sent automatically with requests to the same domain, and can be set HttpOnly (JavaScript can't read them), Secure, and SameSite. localStorage is about 5–10MB, readable only via JavaScript, persists until deleted, and is shared across tabs of the same origin. sessionStorage is like localStorage but per-tab and lost when the tab closes.
What are the HTTP status code groups and what do they mean?
A.4xx is a server error while 5xx means the client sent a bad request
B.2xx success, 3xx redirection, 4xx client error, 5xx server error
C.Every error returns 200 with a flag in the body, so the frontend only needs to read the body
D.3xx means the request failed and must not be retried
Answer: B
2xx is success (200 OK, 201 Created, 204 No Content). 3xx is redirection (301 permanent, 302 temporary, 304 reuse the cached copy). 4xx is a client-side error: 400 bad data, 401 unauthenticated, 403 authenticated but insufficient permission, 404 not found, 409 conflict, 429 too many requests. 5xx is a server-side error (500, 502, 503, 504).
A.A server-side rule accepting requests only from pre-registered IP addresses
B.A script from one origin may not read data from another origin unless CORS permits it
C.It blocks every request to a different origin entirely
D.Two URLs on the same domain are always the same origin even with a different scheme or port
Answer: B
The Same-Origin Policy is a browser policy: a script can only read data from its own origin. An origin is protocol, domain, and port — differing in any one of the three is a different origin. It doesn't block sending requests (images, forms, and scripts still load), it blocks JavaScript from reading responses and accessing another origin's DOM. CORS is how a server grants permission in a controlled way.
A.The three are equivalent if the script is placed at the end of <body>
B.async runs as soon as it loads with no order guarantee; defer runs after parsing, in order
C.defer only downloads the file and never runs it unless called manually
D.Both async and defer download in parallel and run in the declared document order
Answer: B
A plain <script> blocks HTML parsing: the browser stops, loads and runs it, then continues. async loads in parallel and runs as soon as it loads, so order between scripts is not guaranteed — good for independent scripts like analytics. defer loads in parallel but delays execution until HTML parsing is finished and preserves declaration order — the default choice for application scripts.
A.An SPA needs no server because it runs fully offline after the first load
B.An SPA has no real URLs so a link to a specific screen cannot be shared
C.An MPA is always faster than an SPA because it needs no JavaScript
D.An SPA swaps content with JavaScript on navigation; an MPA loads a new HTML page from the server
Answer: D
An SPA loads HTML and the bundle once, then a client-side router swaps content and updates the URL without reloading the page — fast screen transitions, state is preserved. An MPA has the server return a separate HTML document for each route — fast first render, simple SEO, but every navigation is a page reload. Many modern apps use a hybrid: server-render the first page, then navigate client-side.
A.The signature encrypts the payload before it is sent to the server
B.Three parts — header, payload, signature; the payload is only base64url so anyone can read it
C.It has only two parts: the payload and the signature joined by a dot
D.The payload is encrypted with a secret key so nobody can read what is inside the token
Answer: B
A JWT has three parts joined by dots: header (signing algorithm), payload (claims like sub, exp, role) and signature. Header and payload are only base64url-encoded — that is an encoding, not security, so anyone holding the token can read the contents. The signature only guarantees the token was not tampered with. So never put sensitive data in the payload.
Why prefer semantic HTML before reaching for ARIA attributes?
A.Semantic HTML only affects SEO and has nothing to do with accessibility
B.ARIA slows the page down noticeably so it should only be used when essential
C.Modern browsers ignore ARIA attributes entirely when rendering the page
D.Semantic tags carry the role, state and keyboard behaviour built in; ARIA only describes
Answer: D
Semantic elements ship with three things built in: a role for screen readers, keyboard behaviour (focus, Enter/Space) and default state. A <div role="button"> has only the role — you still must add tabindex, handle keys, and manage aria-disabled yourself. The general rule is to use the element with the right meaning first; ARIA only for things HTML cannot express (e.g. aria-live, aria-expanded).
A.Build a separate mobile site and redirect based on the user agent
B.A viewport meta tag, a fluid layout in relative units, and media queries that change the layout
C.Set a fixed pixel width on every block so the layout is identical on every device
D.Media queries alone are enough; the viewport meta tag is optional
Answer: B
Three pieces: the <meta name="viewport" content="width=device-width, initial-scale=1"> tag so mobile browsers use the device width; fluid layout using relative units, max-width, flexbox/grid; and media queries that change layout at breakpoints. The default approach is mobile-first: design for small screens first, then extend with min-width, because adding is easier than removing.
A.No loading state is needed if the API always responds in under 500ms
B.Loading, loaded with data, empty, and error — each with its own UI
C.Only loading and loaded are needed; let the browser display errors
D.Merge empty and error since the user sees no data either way
Answer: B
Four states: loading (skeleton keeps the same layout so nothing jumps), loaded, empty (success but no items — offer guidance or a create button) and error (a clear message with a retry button). The empty branch is the most commonly missed, leaving users staring at a blank screen with no explanation.
When should an image's alt attribute be empty (alt="")?
A.While the image is still loading, to avoid showing placeholder text
B.When the image is purely decorative — alt="" tells screen readers to skip it
C.Never — every image on the page must have a description
D.When the image already has a title, since title replaces alt
Answer: B
Use alt="" when the image is purely decorative — background icons, dividers, illustrations adding no information. Screen readers will skip it entirely. If you omit the alt attribute altogether, screen readers read the filename instead, which is worse noise.
A.The set of rules deciding how elements are displayed
B.The markup file the server sends to the browser
C.The mechanism for storing the page's temporary data in the browser
D.An object tree representing the document
Answer: D
It's the object tree representing the document, built by the browser after parsing the markup. All runtime UI changes happen on this tree, not on the original downloaded text.
C.Telling a mobile browser to use the correct width
D.Setting a fixed zoom level the user cannot change
Answer: C
It tells the mobile browser to use the actual screen width instead of assuming a desktop-wide frame and zooming the whole page out. Without it, text is tiny and responsive breakpoints never trigger.
A 300px div with 20px padding and 2px border under border-box — actual width?
A.260px, because the content is reduced twice
B.300px, with the padding and border counted inside
C.340px, with only the padding added on
D.344px, because the padding and border are added on
Answer: B
300px. In this mode the declared value is the size of the whole box, so the content area shrinks to 256px to make room. In the default mode the result would be 344px because padding and border add to it.
How does display: none differ from visibility: hidden?
A.One removes it from the layout while the other keeps its space
B.One hides it from users and the other from search engines
C.One can be animated smoothly and the other cannot
D.One applies to child elements and the other only to the parent
Answer: A
One removes the element from layout entirely so surrounding elements close the gap; the other keeps its space so layout is unchanged. Both hide the content from screen readers.
A.That unit renders more precisely on high-density screens
B.The text scales with the browser's setting
C.That unit adjusts itself to the parent element's size
D.That unit is computed faster while the browser lays out the page
Answer: B
Because text scales with the browser's font size setting. A user who sets a larger font sees the page scale up, while absolute values ignore that setting — a real accessibility barrier for older users.
What is the most important difference between GET and POST?
A.One is for APIs and the other for forms on a page
B.One limits the data size and the other does not
C.One is encrypted in transit while the other is sent in plain text
D.One is only for reading while the other sends data
Answer: D
One method only reads and changes nothing, the other sends data that causes changes. Because the read method is considered safe, browsers and caches freely replay it at any time.
A.That the application has no browser-side injection holes
B.The content cannot be read in transit
C.That the website carries no malware or fraud
D.That the user's data is stored safely on the server
Answer: B
It ensures content can't be read or modified in transit, and authenticates that the server really owns that domain. It says nothing about whether the site is trustworthy or free of vulnerabilities.
A button inside a <form> reloads the page. Why, and how to handle it?
A.The browser refreshes itself when an input changes
B.The form lacks a declared method so it uses the default
C.A button defaults to being a submit button
D.The click handler was not attached to the button correctly
Answer: C
A button defaults to a submit button. Fix it by declaring the button type as a plain button, or by calling the function that prevents the default behavior in the submit event handler.
How does position: sticky differ from position: fixed?
A.One only works vertically while the other works in both directions
B.One needs coordinates declared while the other needs nothing
C.One keeps its space in the layout while the other is always removed from it
D.One sticks within its parent's bounds while the other is fixed
Answer: D
A sticky element holds its position while its parent is still in view, then scrolls away with it; a fixed element always stays in place relative to the screen no matter how far you scroll.
A.The rule in the file loaded later overrides entirely
B.The higher-specificity selector, with the later one winning a tie
C.The rule with more properties takes precedence
D.Whichever rule is declared later in the file always wins
Answer: B
The selector with higher specificity wins, and only when they tie does the later-written rule win. Specificity is counted from the number of IDs, classes and tags in the selector — in decreasing order of importance.
A.A CORS error means the request never reached the server
B.CORS is configured on the frontend; just add a header to the request and the error goes away
C.A preflight only happens when the request carries a multipart file attachment
D.The server sets Access-Control-Allow-Origin; complex requests ask first with OPTIONS
Answer: D
CORS is how a server relaxes the Same-Origin Policy via response headers: Access-Control-Allow-Origin, -Methods, -Headers, and -Credentials when cookies are sent. For a "non-simple" request (PUT/DELETE/PATCH, custom headers like Authorization, or Content-Type: application/json), the browser first sends an OPTIONS preflight to ask permission. CORS errors must be fixed on the server; the client cannot fix them.
Which measure does NOT actually reduce XSS risk on the frontend?
A.Let the framework escape output and avoid innerHTML/dangerouslySetInnerHTML/v-html
B.Set a Content-Security-Policy to restrict which script sources may run
C.Just validate the data in the client-side form before submitting
D.Sanitize with a dedicated library (DOMPurify, say) before inserting into the DOM
Answer: C
XSS is injecting script that runs in the user's page context. Three defence layers in order: let the framework escape by default and avoid raw-HTML rendering APIs; sanitise with DOMPurify when user HTML must be shown; and set a CSP to restrict which scripts may run. Client-side validation is not a security measure, since the API can be called directly.
What does CSRF exploit, and what is the main defence?
A.It exploits cookies travelling automatically to the target domain; the main defences are SameSite and a token
B.It only affects GET requests, so switching everything to POST is safe
C.It no longer exists because modern browsers block third-party cookies entirely
D.It exploits a hole allowing script to be injected and run in the victim's page
Answer: A
CSRF exploits the fact that cookies are attached automatically to requests to the right domain: another page tricks the browser into sending a request to your app while the user is logged in, and the server performs the action because it sees a valid cookie. Defence: set SameSite=Lax or Strict on session cookies, check a CSRF token on write operations, and never use GET for data-changing actions.
How does session (cookie) authentication differ from token (JWT) authentication?
A.A JWT is always safer than a session because its content is digitally signed
B.Sessions can be revoked instantly because the state is on the server; a JWT is hard to revoke early
C.Sessions cannot be used for applications running on several servers
D.A JWT cannot be put in a cookie and must live in a header
Answer: B
With sessions, the server stores session state and the cookie only carries an id — logging out or locking an account takes effect immediately by deleting the session, but the server must look it up on every request and needs a shared store when running multiple machines. With JWT, the info lives in the token and the server only verifies the signature — no lookup needed, but an issued token stays valid until it expires unless you keep a revocation list.
How should you implement automatic token refresh when an API returns 401?
A.Each request catches its own 401 and calls refresh itself — simpler and clearer than a shared handler
B.Redirect to the login page at the first 401
C.Call refresh every 30 seconds regardless of whether a 401 occurred
D.Catch the 401 in a shared interceptor, refresh once, then replay the queued requests
Answer: D
Put the handling in a shared layer: on a 401, check the "refreshing" flag — if not set, call refresh once and queue the other 401 requests; once refresh completes, replay the whole queue with the new token. If refresh fails, clear the session and redirect to login. Guard against an infinite loop: don't refresh for the refresh request itself, and retry each request only once.
A.Delegation means attaching a separate listener to each child but sharing one handler function
B.Bubbling goes from the root down to the target while capturing goes from the target up
C.Every event bubbles, including focus and scroll on an element
D.Capturing goes from the root down to the target, bubbling rises back up; delegation attaches the listener on a parent
Answer: D
An event goes through three phases: capturing from window down to the target element, the target itself, then bubbling back up. addEventListener listens in the bubbling phase by default; pass { capture: true } to listen during the capture phase. Event delegation attaches one listener on a parent element and uses event.target.closest(...) to find which child was affected — fewer listeners and it still works for elements added later.
What is an optimistic update, and what do you need in place to roll back on failure?
A.Update the UI immediately with the expected result, keeping the old state to roll back on failure
B.Show the change only after the server confirms, so displayed data is always exactly right
C.Cache the response so the next view shows it instantly without a call
D.Send several identical requests in parallel and take the first response
Answer: A
An optimistic update renders the expected result immediately without waiting for the server — the action feels instant. What you need for it: keep the state from before the change, and when the request fails restore exactly that state and surface a clear error. It suits small, high-success-rate actions (likes, bookmarks, reordering); it does not suit payments or irreversible actions.
A.Pass an AbortController's signal into fetch and call controller.abort()
B.It cannot be cancelled — you can only ignore the result when it arrives
C.Call promise.cancel() on the promise fetch returns
D.Set timeout: 0 in fetch's second options object
Answer: A
Create an AbortController, pass controller.signal into fetch, and call controller.abort() when you need to cancel — the promise rejects with an error whose name === "AbortError", which you should ignore so it isn't shown as a real error. AbortSignal.timeout(ms) covers the time-limit case. The same mechanism works for addEventListener via its signal option.
A.A Service Worker is faster than a Web Worker so it suits all heavy client-side computation
B.A Web Worker keeps running after every tab of the page is closed
C.A Web Worker runs computation on its own thread; a Service Worker is a proxy between the page and the network
D.Both can access the DOM so they can update the UI directly
Answer: C
A Web Worker runs JavaScript on a separate thread so heavy computation doesn't freeze the UI — the page and worker exchange messages via postMessage, and the worker can't touch the DOM. A Service Worker is a proxy between the page and the network: it intercepts requests, serves from cache, enables offline operation and receives push. It lives independently of tabs and only runs over HTTPS (or localhost).
A.Files with a hash in their name can have a very long max-age (cache busting)
B.The entry HTML should have a long max-age to cut requests to the server
C.no-cache means the browser may not store a copy at all
D.An ETag forces the server to resend the whole body on every validation
Answer: A
The standard strategy: assets with a hash in the filename (app.9f2c1b.js) get Cache-Control: max-age=31536000, immutable; the entry HTML gets no-cache so it is always revalidated. no-cache means "store but must revalidate", only no-store means don't store. ETag/Last-Modified allow a 304 when the content hasn't changed, saving bandwidth even though it still costs a round trip.
Where should you apply code splitting with dynamic import() first?
A.Split every component into its own chunk to make the main bundle as small as possible
B.By route, and by heavy blocks only used on interaction (modals, charts)
C.Splitting by third-party library is the only approach that works
D.Only split once the bundle exceeds 5MB compressed
Answer: B
Start with routes: one chunk per page, so users only download what they enter. Next are heavy blocks that only appear on interaction — complex modals, editors, chart libraries, maps. Avoid splitting too finely because each chunk is a request and carries coordination overhead. For chunks likely to be needed, you can prefetch during idle time or when the user hovers the open button.
What makes tree-shaking work, and what defeats it?
A.It only works when minification is enabled at build time
B.It relies on running the application to see which functions are never called
C.It relies on ES Modules' static structure; it breaks with CommonJS or side effects
D.It can also remove code inside conditional branches that are never true at runtime
Answer: C
Tree-shaking removes unused exports, relying on the static structure of ES Modules — import/export are determinable at build time. It fails when a library ships only CommonJS, when a namespace is accessed by dynamic name or passed around so the bundler can't tell which exports are used, or when a module has import-time side effects the bundler can't mark (sideEffects in package.json).
Which technique does NOT reduce image cost and can even hurt your metrics?
A.Use modern formats (WebP/AVIF) with a fallback instead of shipping the original
B.Serve several sizes through srcset/sizes so small devices do not download desktop-sized images
C.Set loading="lazy" on below-the-fold images and declare width/height
D.Set loading="lazy" on the large image at the very top of the page to make it load faster
Answer: D
Four things in order of impact: serve the right size via srcset/sizes; use WebP/AVIF with a fallback; defer off-screen images with loading="lazy"; and always declare width/height (or aspect-ratio) to reserve space and avoid layout shift. The hero image at the top of the page is the exception — it's usually the LCP element, so load it early instead.
A.LCP measures when the largest content block appears — improve it by loading the hero image early
B.CLS measures layout shift — improve it by setting dimensions for images and ads
C.All three can only be measured in the lab, never from real users
D.INP measures interaction response latency — improve it by breaking up long tasks
Answer: C
LCP (Largest Contentful Paint) measures when the largest content block renders. INP (Interaction to Next Paint) measures the latency from a user interaction to the next painted frame — replacing FID. CLS (Cumulative Layout Shift) measures unexpected layout shift. Use Lighthouse for diagnosis and real user data (the web-vitals library, CrUX) to see actual field performance.
A.It replaces every case where you need the current scroll position
B.The browser tracks visibility itself and calls back asynchronously, with no layout measurement per scroll
C.It runs on another thread so it uses none of the main thread's resources
D.It only works with images and nothing else
Answer: B
A scroll listener fires many times, and inside it you typically call getBoundingClientRect() — an operation that forces the browser to recompute layout immediately, causing jank. IntersectionObserver lets the browser track visibility itself and invoke the callback asynchronously when the intersection ratio changes. It offers rootMargin to trigger early and threshold to pick the visibility level.
In the browser event loop, when do microtasks run relative to macrotasks?
A.Macrotasks always take priority because they have lower latency
B.Both run in parallel on two different threads
C.Microtasks and macrotasks alternate one for one
D.Every microtask runs after each macrotask, before the next render
Answer: D
The entire microtask queue is drained after each macrotask and before the next repaint. So an infinite chain of microtasks blocks repainting entirely and freezes the page.
A.One drops the extra events; the other queues them up
B.One runs synchronously; the other asynchronously
C.One waits until the activity stops; the other runs at a steady interval
D.One is for DOM events; the other for network calls
Answer: C
The first waits until the event has fully stopped for a period, then runs once. The second runs at most once per cycle. A search box suits the first; a scroll event suits the second.
What does adding a click listener with { once: true } do?
A.The listener removes itself after its first run
B.The listener only runs during the bubbling phase
C.Only one listener is allowed on that element
D.The listener runs synchronously instead of through the event queue
Answer: A
The listener removes itself after the first run. It avoids having to keep a reference to the function just to remove it later — a source of leaks when people forget the removal step.
A.When the data must be sent with every request to the server
B.When the data must be shared between different domains
C.When you need to store a lot of structured data and query it by index
D.When the data must survive after the browser is closed
Answer: C
When you need to store lots of structured data and query by index. The simple key-value store only holds strings, is limited to a few megabytes, and every operation blocks the main thread — so it is not suited to large data.
How do cookies with SameSite=Strict, Lax and None differ?
A.By how far the cookie may be sent on requests originating from another site
B.By whether the cookie is encrypted in transit
C.By how long the cookie lives in the browser
D.By whether JavaScript can read the cookie
Answer: A
By how much a cookie may be sent on a request originating from another site. The strictest level does not send it even when the user clicks a link from another site over — so they arrive logged out.
A.Letting the server push data to the client proactively
B.Compressing response bodies to save bandwidth
C.Head-of-line blocking: many parallel requests over one connection
D.Encrypting data in transit
Answer: C
Head-of-line blocking: with HTTP/1.1, responses on one connection must be returned in request order, so a slow response can block the ones after it. HTTP/2 allows many streams in parallel on one connection, plus header compression.
How do the ETag and If-None-Match headers work together?
A.The server uses them to compress the content before sending
B.The client sends the old value back; the server returns 304 if the content is unchanged
C.The client uses them to request part of a resource
D.They verify the content was not altered in transit
Answer: B
The server sends an identifier for the resource's version; next time the client sends it back, and the server returns a not-modified status code if the content is unchanged. That response has no body, so it saves bandwidth.
In CSS, when does an element create a new stacking context?
A.With a position plus a z-index, an opacity below 1, a transform, or a filter
B.Only when the element has a z-index other than auto
C.When the element sits inside an absolutely positioned element
D.When the element has more than one child element
Answer: A
When it has positioning with a z-index, opacity below one, a transform, a filter, and a few other properties. Its children are trapped inside that context — no z-index, however high, can escape the parent's scope.
B.Grid is newer so it should always replace flexbox
C.Flexbox for one-dimensional layout; Grid for two-dimensional layout
D.Flexbox for desktop; Grid for mobile
Answer: C
One-dimensional layout — a single row or column — suits Flexbox. Two-dimensional layout with rows and columns that must align together suits Grid. They complement each other and are often used together on one page.
How do CSS container queries differ from media queries?
A.It runs on the server so no JavaScript is needed
B.It fully replaces media queries
C.It responds to the containing element's size rather than the screen's
D.It only works with grid layouts
Answer: C
It responds to the container's size instead of the viewport size. That way a card component renders correctly whether it sits in a narrow sidebar or a wide content area, without knowing anything about the page layout.
How do CSS custom properties differ from Sass variables?
A.They need a build step to become ordinary CSS
B.They are faster because the browser optimizes them
C.Exist at runtime, can be changed by JavaScript, inherit
D.They can only hold colour values
Answer: C
They exist at runtime: changeable from JavaScript, inherited down the DOM tree, and switchable per media query. Preprocessor variables are substituted at compile time, so they no longer exist in the output.
A.Compressing images in the content area to save bandwidth
B.Hiding content from screen readers
C.Skipping the rendering of off-screen content until it is needed
D.Lazy-loading the iframes on the page automatically
Answer: C
It lets the browser skip rendering and painting off-screen content until the user scrolls to it. On very long pages it cuts first-paint time significantly without writing any virtual scroll code.
What does INP (Interaction to Next Paint) measure?
A.The time until every resource on the page has loaded
B.How many times the user interacts in a session
C.The delay between a user's interaction and the screen updating
D.The time from typing the URL until the first content appears
Answer: C
The latency from a user interaction — click, tap, keypress — until the screen updates. It replaces the older metric that only measured the first interaction, while the new one considers the whole session and takes the worst value.
What does Subresource Integrity (SRI) protect against?
A.Data being eavesdropped in transit
B.A CDN script's content being altered from the version you reviewed
C.A user downloading a malicious file from your site
D.A script blocked by a firewall or an ad blocker
Answer: B
It guards against a script or stylesheet loaded from a CDN being tampered with. The browser compares the downloaded file's hash against the value declared in the tag and refuses to run it if they differ.
What does rel="noopener" on a link opening a new tab protect against?
A.The new page reading the original page's cookies
B.The new page being blocked by the popup blocker
C.The new page being slow because it shares a process with the original
D.The new page controlling the original one through the window.opener reference
Answer: D
It guards against the new page controlling the original page through a reference to the window that opened it. A malicious page uses that reference to navigate the original page to a fake login page — the user returns to the old tab and types their password there.
What does focus management require when opening a modal?
A.Disabling the keyboard while the modal is open
B.Hiding the modal from screen readers until it is opened
C.Moving focus into the modal, trapping it there, and returning it when it closes
D.Setting a tab order attribute on every element inside the modal
Answer: C
Three things: move focus into the dialog on open, trap focus so it can't leave, and return it to the element that opened the dialog on close. Otherwise keyboard users keep tabbing into the background and lose their place.
B.When content changes dynamically without the user having caused it
C.For every element whose content changes over time
D.When the page mixes several languages in the same content
Answer: B
When content changes dynamically without the user causing it at their current location — form error messages, updated search results, or a transient notification. Screen readers do not announce those changes on their own.
What are source maps for, and should they be deployed to production?
A.Splitting the bundle into smaller chunks
B.Compressing the code once more to shrink it
C.Checking data types at runtime in the browser
D.Mapping minified code back to the original, uploaded to the monitoring service
Answer: D
They map minified code back to the original source so stack traces are readable. They should be uploaded to an error monitoring service rather than exposed publicly — that way you can read the trace without the source being exposed to everyone.
What difference between ESM and CommonJS matters to a bundler?
A.ESM executes faster in the browser
B.ESM's static structure lets tree-shaking analyse it
C.CommonJS supports dynamic import while ESM does not
D.CommonJS compresses better so the bundle is smaller
Answer: B
The newer module system has a static structure: imports and exports must be at the top level, so a bundler can analyze what is unused and eliminate it. The older syntax allows conditional loading, so that cannot be inferred.
A.Send it to the server after each step and read it back when needed
B.In one shared place, and consider persisting it so a reload does not lose it
C.In each step's component so the steps stay independent
D.In the URL query string so it can be shared
Answer: B
In one shared place for the whole form — a state store or a context at the outer wrapper level. Also consider persisting it to browser storage so the user does not lose data if the page is accidentally reloaded.
Several requests receive 401 and all call token refresh. How is this handled?
A.Block every request until the user logs in again
B.Log the user out as soon as that status code appears
C.Let each request refresh and retry independently
D.Keep one shared refresh promise that the other requests await
Answer: D
Keep a shared refresh promise: the first request starts the refresh, subsequent requests await that same promise and then retry together. Multiple parallel refreshes can invalidate each other if the server rotates the refresh token.
A.Stealing cookies over the network; prevented by transport encryption
B.Forging a request from another site; prevented with an anti-forgery token
C.Injecting malicious script into the page; prevented by escaping input
D.Embedding your page in a transparent iframe; prevented with a frame-refusing header
Answer: D
An attacker embeds your page in an invisible frame layered over their own. The user thinks they are clicking a button on the other site but are actually clicking a button on yours. Prevented with a deny framing header.
B.On first blur, then per keystroke once an error already exists
C.Only on the server for correctness
D.Per keystroke from the start for the fastest feedback
Answer: B
Validate when the user leaves the input the first time, then switch to per-character validation after that field already has an error — so they see the error disappear as soon as they fix it. Reporting errors from the first character feels accusatory.
What principles should govern showing API errors to users?
A.Show one generic message for every kind of error
B.Show the server's message verbatim for accuracy
C.A friendly message with a next action, with the technical detail going to the logs
D.Show nothing and retry silently in the background
Answer: C
A friendly message plus a next action the user can take, with technical details written to the log along with a trace ID. Give that ID to the user so they can report the bug and you can find the exact record.
A.Fetch early for this page, fetch ahead for the next page, and open the connection in advance
B.They are hints the browser always ignores
C.They are equivalent, differing only in priority
D.They differ only in which resource types they support
Answer: A
In order: eagerly load a resource this page definitely needs with high priority; preload a resource for the next navigation with low priority; and open a connection to a domain ahead of time to skip the handshake cost.
How should responsive images be declared to load the right size?
A.A srcset attribute listing the variants and sizes describing the displayed size
B.Measure the screen with JavaScript and set the image path
C.Setting the width in CSS is enough for the browser to pick the right variant
D.Just ship the largest variant and let the browser scale it down
Answer: A
One attribute listing the image candidates with their intrinsic widths, and one attribute describing the display size at each breakpoint. Without the second attribute, the browser assumes an image as wide as the viewport and downloads an oversized candidate.
What is the History API (pushState, replaceState) used for?
A.Changing the URL and history without reloading — the basis of SPA routing
B.Navigating to another page without a link element
C.Recording the user's browsing history for analytics
D.Deleting entries from the browser's history
Answer: A
Changing the visible path and pushing entries into history without reloading the page — the foundation of single-page app routing. You must also listen for the history navigation event to handle when the user clicks back.
An application needs heavy computation without freezing the UI. What should it use?
A.Use a timer to defer the computation
B.Wrap the computation in a promise so it runs asynchronously
C.A Service Worker, since it also runs on its own thread
D.A Web Worker — running on its own thread and communicating by messages
Answer: D
A web worker running on its own thread and communicating via messages. It has no DOM access, so it suits pure computation only — image processing, large data parsing, encryption — not UI updates.
A.Letting the component reach into the host page's DOM
B.Isolating the DOM and CSS from the rest of the page
C.Rendering the component on the server before sending it
D.Speeding up rendering by skipping computation steps
Answer: B
It isolates the inner DOM tree and CSS from the rest of the page. That way a widget embedded in a third-party page isn't broken by that page's CSS, and its styles don't leak out either.
Beyond translating strings, what does internationalising a frontend need?
A.Just setting the language attribute on the root tag
B.Just a dictionary file per language
C.Just a machine-translation API called at runtime
D.Formatting numbers and dates, plurals, word order, and writing direction
Answer: D
Locale-aware number, currency and date formatting; plural rules that differ across languages; differing word order; and right-to-left writing direction for some languages.
What does micro-frontend solve, and what does it cost?
A.It lets several teams deploy independently, at the cost of operational and bundle complexity
B.It speeds up builds because each part builds separately
C.It allows using several frameworks at no cost
D.It shrinks the bundle because each part is loaded separately
Answer: A
It lets many teams develop and deploy independently on one product. The costs: operational complexity, dependencies duplicated across bundles so the total bundle size grows, and difficulty keeping the UI consistent.
What principle should govern client-side state management?
A.Store state in the URL so every state can be shared
B.Put all state into one single global store
C.Separate server state from UI state and use different tools for each
D.Keep every piece of state in components to avoid dependencies
Answer: C
Separate server state from UI state and use different tools for each. API data has its own caching, revalidation and synchronisation needs that an ordinary state store does not solve.
A.Removing unused code from the bundle at build time
B.Turning features on and off at runtime, decoupling deployment from release
C.Splitting users into groups for behavioural analysis
D.Controlling users' access to functionality
Answer: B
Turn a feature on or off at runtime, decoupling code deployment from feature release. That lets you merge code continuously into main, roll out gradually to user groups, and kill a broken feature in seconds.
A.Mostly E2E tests because they are closest to the user
B.Just snapshot tests for every component
C.Many component/integration tests, few E2E, few unit
D.Mostly unit tests for each small function
Answer: C
Mostly component tests that exercise real behavior while still running fast. A few E2E tests for the most critical business flows. And unit tests for pure logic functions — usually far fewer than on the backend.
This shape is called the test trophy, unlike the familiar pyramid.
How should dark mode be implemented to avoid a flash on page load?
A.Rely only on the system colour preference query
B.Set the theme in a hook that runs after the component mounts
C.A synchronous script setting a class on the root element before the content renders
D.Load two stylesheets and switch between them at runtime
Answer: C
A synchronous script in the document head reads the saved preference and sets a class or attribute on the root element, before content is painted. Placing it after the UI framework boots makes users see a light background flash before it switches to dark.
What steps should an accessibility check on a page involve?
A.Just run an automated checker
B.Just make sure the colour contrast meets the standard
C.An automated tool, then keyboard navigation, then a screen reader
D.Just add all the ARIA attributes
Answer: C
Three steps in order: run an automated tool to catch obvious issues, tab through the whole page with a keyboard to check focus order and focus traps, then try it with a screen reader.
The application bundle keeps growing. How is it controlled long term?
A.Review it manually once a quarter
B.Compress harder at the server layer
C.Set a size budget in CI and fail the build when it is exceeded
D.Split the bundle into smaller chunks
Answer: C
Set a size threshold in the CI pipeline and fail the build when it's exceeded. Without a threshold, the bundle creeps up with every added library and nobody notices until the page is noticeably slow.
How should a large file upload from the browser be handled?
A.Convert the file to a base64 string and send it in JSON
B.Request a pre-signed URL and upload straight to object storage, chunking when very large
C.Send the whole file in one request to the application's API
D.Compress the file on the client and send it normally
Answer: B
Get a presigned URL from the server and upload straight to object storage, splitting into multiple parts if the file is very large. Routing through the application server forces it to hold the whole file and wastes bandwidth.
Using height: 100vh for a full screen breaks on mobile browsers. Why?
A.That unit does not account for the address bar appearing and disappearing
B.Mobile browsers do not support viewport units
C.The device's pixel ratio multiplies the value
D.The virtual keyboard makes the viewport size miscalculated
Answer: A
Because that unit doesn't account for the address bar appearing and hiding. The available height changes as the user scrolls, so the element overflows or falls short. Dynamic viewport units were added later to solve exactly this.
What does declaring a scroll listener as passive achieve?
A.The events are coalesced to reduce the number of calls
B.The listener only runs once the scrolling has fully stopped
C.The listener runs on its own separate thread
D.The browser scrolls immediately without waiting for the code
Answer: D
The browser scrolls immediately without waiting for the code to finish. Without declaring it, it has to wait and see whether the code prevents the default behavior, and that delay makes scrolling janky on weak devices.
