Frontend Performance Practice Exam

Question 1 Frontend Performance

What is islands architecture?

Dead-code elimination by bundler — relies on ES module syntax and side-effect-free declarations. Mostly static HTML with small interactive "islands" hydrated independently — Astro, Fresh. Treat performance as a product feature that must be protected continuously, not as a one-time cleanup project. WebP smaller in nearly all cases; PNG only for archival/print or fallback.

Question 2 Frontend Performance

Avoid layout shifts from fonts?

Time from first input to handler start. Deprecated in 2024 in favor of INP. Use font-display: optional or swap + size-adjust descriptors to match fallback metrics. Set budgets, monitor RUM, regression-test in CI, prioritize Core Web Vitals — perf is a continuous practice. Replaced FID in 2024. Time from user interaction to visible response. Good ≤ 200ms.

Question 3 Frontend Performance

Why test on slow 4G?

Pre-render at build time; serve static HTML — fastest, but content must be known at build. For predictable performance, mirror small critical assets to your origin — controlled cache and version. Worst-case interaction latency observed during page visit (with some smoothing) — captures real interaction pain. Median user device + network is far slower than developer laptops.

Question 4 Frontend Performance

Dynamic import?

Third-party scripts can add significant network, execution, and privacy costs outside your direct control. Pagination has predictable cost per page; infinite scroll accumulates DOM and memory — use virtualization. import('./module') — returns a Promise, splits a chunk at the call site. app.[contenthash].js — long cache TTL since URL changes when content changes.

Question 5 Frontend Performance

What is render blocking?

Render blocking happens when the browser must wait for certain resources like CSS or synchronous JavaScript before painting content. Variant weighting visual completeness over time. First-visit experience matters; cache often gets evicted; parse/compile cost scales with bundle size every time. Browser may reuse one HTTP/2 connection for multiple domains sharing IP+cert — reduces handshakes.

Question 6 Frontend Performance

HTTP/3 over QUIC — what changed?

HTTP/1.1 default — keeps TCP connection open for follow-up requests. Reduces handshake repetition. <link rel="preload" href="..." as="..."> — fetch a critical resource early without blocking parse. It means delivering a useful core experience first, then layering richer behavior as device and network conditions allow. Eliminates TCP head-of-line blocking; faster handshake (0-RTT for resumed connections).

Question 7 Frontend Performance

Concurrent React rendering benefits?

For predictable performance, mirror small critical assets to your origin — controlled cache and version. Interruptible rendering — urgent updates preempt low-priority ones, keeping UI responsive. JavaScript → Style → Layout → Paint → Composite — composite-only changes (transform, opacity) are cheapest. State updates inside event handlers, promises, timeouts batch into single re-render in React 18+.

Question 8 Frontend Performance

What is frontend performance?

SVGO removes editor metadata, redundant attributes — often 30–50% size reduction. Images are often the heaviest assets on a page, so compression, resizing, and modern formats can cut load time significantly. Tells browser to optimize an element — overuse hurts perf by promoting too many layers. Frontend performance is how quickly and smoothly a web application loads, renders, and responds to user input.

Question 9 Frontend Performance

Preconnect to Google Fonts?

<link rel="preconnect" href="https://fonts.googleapis.com"> + crossorigin variant for fonts.gstatic.com. Each adds bytes + parse time. Audit with bundle-phobia, package-size. Defer non-critical scripts, code-split, use Web Workers for heavy work, lazy-load below-fold features. Total Blocking Time — total time main thread was blocked > 50ms during load.

Question 10 Frontend Performance

What is preconnect?

Frontend performance is how quickly and smoothly a web application loads, renders, and responds to user input. <link rel="preconnect" href="https://cdn..."> — early DNS+TCP+TLS to a domain you'll use. Self-host removes third-party DNS+connect; CDN cache hit unlikely now that browser caches are partitioned. Sync work with the browser's repaint cycle — for animation/visual updates.

Question 11 Frontend Performance

What is the doc TTI?

Hybrid: pre-render, then re-render on demand after stale period (Next.js feature). Off-screen iframes still cost JS execution; defer until needed. Time to Interactive — when page is reliably responsive to user input. Largely superseded by INP for measurement. Moment.js, full lodash, large icon libraries — replace with date-fns/luxon, lodash-es per-method, modular icons.

Question 12 Frontend Performance

JS execution priority?

Critical interactive code first; analytics, ads, third-party widgets last and async. HPACK reduces redundant header bytes — significant on cookie-heavy requests. Critical CSS lets the browser render above-the-fold content sooner without waiting on the full stylesheet. Allow control over the DNS prefetching behavior — rarely needed.

Question 13 Frontend Performance

Quick wins checklist?

Compress images (AVIF/WebP), preconnect to critical origins, lazy-load below-fold, code-split routes, defer non-critical JS, inline critical CSS, set proper cache headers. Serve modern bundle to modern browsers; legacy bundle to old browsers — reduces modern-bundle bloat. Defer JS execution until user interaction; serialize state in HTML — near-zero JS upfront. Generate smaller font files containing only glyphs you actually use — drastic file-size reduction.

Question 14 Frontend Performance

Long tasks definition?

Tasks taking > 50ms on the main thread — block input responsiveness. Image attribute hinting browser to decode off the main thread, reducing input latency. Skip rendering of off-screen content; major win for long pages with many sections. Google library that simplifies Service Worker caching strategies (network-first, cache-first, etc.).

Question 15 Frontend Performance

useTransition purpose?

Mark a state update as non-blocking; React keeps previous UI interactive. Google's tiny library for capturing Core Web Vitals from real users and sending to analytics. Return cached version; in background fetch fresh; update cache. First-visit experience matters; cache often gets evicted; parse/compile cost scales with bundle size every time.

Question 16 Frontend Performance

What is prefetching?

Skip rendering of off-screen content; major win for long pages with many sections. Single sprite file referenced by <use href="#icon-id"> — cached once, used many times. Prefetching downloads likely future resources at low priority to improve the next navigation. State updates inside event handlers, promises, timeouts batch into single re-render in React 18+.

Question 17 Frontend Performance

What is the rendering pipeline summary?

Render critical content first; load decorative + below-fold lazily. Flash of Unstyled Text — text shown in fallback then swapped to web font. Better than FOIT. JavaScript → Style → Layout → Paint → Composite — composite-only changes (transform, opacity) are cheapest. Each route ships only its specific code + shared chunks — minimizes initial JS for SPA.

Question 18 Frontend Performance

Long-term perf strategy?

Image attribute hinting browser to decode off the main thread, reducing input latency. Set budgets, monitor RUM, regression-test in CI, prioritize Core Web Vitals — perf is a continuous practice. Time from first input to handler start. Deprecated in 2024 in favor of INP. Tells browser to optimize an element — overuse hurts perf by promoting too many layers.

Question 19 Frontend Performance

Use defer vs async on scripts?

defer: download in parallel, execute in order after HTML parse.
async: download in parallel, execute as soon as ready (out of order). scheduler.postTask(fn, {priority: 'background'}) — explicit task scheduling with priorities. Browser extensions can inject scripts that run on every page — verify in DevTools with "self" filter. Time to Interactive — when page is reliably responsive to user input. Largely superseded by INP for measurement.

Question 20 Frontend Performance

Avoid client-side analytics in SSR?

Ship less code, load less media, and defer anything the user does not need immediately. FCP measures when the browser first renders any text, image, or non-white canvas content from the page. Run analytics server-side or use minimal beacon; client tracking adds JS and latency. Flash of Unstyled Text — text shown in fallback then swapped to web font. Better than FOIT.

Question 21 Frontend Performance

Why care about real-user monitoring (RUM)?

INP measures how responsive a page feels by tracking the delay between an interaction and the next visual update. Each adds bytes + parse time. Audit with bundle-phobia, package-size. Lab tests can't reproduce all device/network conditions; field data shows actual user experience. Compress images (AVIF/WebP), preconnect to critical origins, lazy-load below-fold, code-split routes, defer non-critical JS, inline critical CSS, set proper cache headers.

Question 22 Frontend Performance

What is INP measurement?

How quickly content visually populates the screen — used by Lighthouse. Worst-case interaction latency observed during page visit (with some smoothing) — captures real interaction pain. Reducing chained requests shortens the time users wait before a page becomes fully usable. contain: layout|paint|size|content — hints the browser to isolate layout/paint work.

Question 23 Frontend Performance

What is HTTP/2 header compression?

Image attribute hinting browser to decode off the main thread, reducing input latency. HPACK reduces redundant header bytes — significant on cookie-heavy requests. Light preconnect — only DNS lookup. Lower priority, cheaper. <img> respects loading=lazy, srcset, alt text. Use background-image only for decorative tiling.

Question 24 Frontend Performance

Service Worker for offline?

Intercept requests, serve from cache, sync when online — basis of PWA offline support. SVGO removes editor metadata, redundant attributes — often 30–50% size reduction. Debouncing delays a function until rapid repeated events stop, which helps reduce wasteful work on input or resize handlers. Render only visible rows of a large list (react-window, TanStack Virtual). Saves DOM and memory.

Question 25 Frontend Performance

Common React bundle bloat?

Google's tiny library for capturing Core Web Vitals from real users and sending to analytics. Moment.js, full lodash, large icon libraries — replace with date-fns/luxon, lodash-es per-method, modular icons. Reducing chained requests shortens the time users wait before a page becomes fully usable. <img> respects loading=lazy, srcset, alt text. Use background-image only for decorative tiling.

Question 26 Frontend Performance

What is code splitting?

Return cached version; in background fetch fresh; update cache. Code splitting breaks JavaScript into smaller chunks so users download only what is needed for the current page. Median user device + network is far slower than developer laptops. SVGO removes editor metadata, redundant attributes — often 30–50% size reduction.

Question 27 Frontend Performance

Lazy-loading iframe perf gotcha?

Treat performance as a product feature that must be protected continuously, not as a one-time cleanup project. Avoid HTTP request for small icons; trade-off is HTML size and cacheability. Off-screen iframes still cost JS execution; defer until needed. Pagination has predictable cost per page; infinite scroll accumulates DOM and memory — use virtualization.

Question 28 Frontend Performance

What is decoding="async"?

<link rel="preconnect" href="https://cdn..."> — early DNS+TCP+TLS to a domain you'll use. Serving different image sizes based on device and layout so users do not download pixels they will never see. Use facade like lite-youtube-embed; defer iframe creation until click. Image attribute hinting browser to decode off the main thread, reducing input latency.

Question 29 Frontend Performance

Why monitor production performance, not just lab tests?

Real-user monitoring captures device diversity, network variance, and page states that synthetic tests miss. Pagination has predictable cost per page; infinite scroll accumulates DOM and memory — use virtualization. Defer JS execution until user interaction; serialize state in HTML — near-zero JS upfront. Render-blocking CSS and synchronous JS in <head> — defer or async to avoid.

Question 30 Frontend Performance

Optimize React rendering?

Pre-render at build time; serve static HTML — fastest, but content must be known at build. cache-control: public, max-age=31536000, immutable — browser skips revalidation entirely. useMemo/useCallback when profiling shows benefit; React.memo for pure children; key stability; avoid unnecessary state in parents. CSS property — content-visibility: auto; tells browser to skip rendering off-screen children.

Question 31 Frontend Performance

What is the Resource Hints spec?

Third-party scripts can add significant network, execution, and privacy costs outside your direct control. Browser extensions can inject scripts that run on every page — verify in DevTools with "self" filter. Standardized link rels: dns-prefetch, preconnect, prefetch, preload, modulepreload. Light preconnect — only DNS lookup. Lower priority, cheaper.

Question 32 Frontend Performance

Long Animation Frames API?

New API capturing long frames (script + style + layout + paint) — better signal than long tasks alone. Critical CSS lets the browser render above-the-fold content sooner without waiting on the full stylesheet. Skip render if props are referentially equal — useful for expensive leaves. Hybrid: pre-render, then re-render on demand after stale period (Next.js feature).

Question 33 Frontend Performance

Third-party script perf cost?

Often dominate page weight and main-thread time; review quarterly; remove unused. HPACK reduces redundant header bytes — significant on cookie-heavy requests. Don't read layout properties in animation loops; use stored values or rAF batching. HTTP status sent before main response — lets server share preload links without waiting for full response.

Question 34 Frontend Performance

Connection coalescing?

Lazy loading delays non-critical resources until they are needed, such as images below the fold. Browser may reuse one HTTP/2 connection for multiple domains sharing IP+cert — reduces handshakes. Flash of Unstyled Text — text shown in fallback then swapped to web font. Better than FOIT. Slow web fonts can delay text rendering or cause layout shifts unless loaded and swapped carefully.

Question 35 Frontend Performance

Beacon API?

Gzip/Brotli reduces payload 60–80% for repetitive structured data. Real-user monitoring captures device diversity, network variance, and page states that synthetic tests miss. navigator.sendBeacon(url, data) — send analytics during unload without blocking navigation. Detailed synthetic test tool with waterfall, filmstrip, multiple locations — gold standard for waterfall analysis.

Question 36 Frontend Performance

What is Time to First Byte (TTFB)?

TTFB measures how long it takes the browser to receive the first byte of the response after making a request. Try network; if it fails or is slow, fall back to cache. Specificity wars hurt maintainability; cascades become unpredictable; not a perf issue but a hygiene one. Always include width/height attributes on <img> — browser reserves space before image loads.

Question 37 Frontend Performance

Image dimensions tip for CLS?

Always include width/height attributes on <img> — browser reserves space before image loads. Each adds bytes + parse time. Audit with bundle-phobia, package-size. For predictable performance, mirror small critical assets to your origin — controlled cache and version. Compression algorithm offering 15–25% smaller payloads than gzip for text — supported in modern browsers.

Question 38 Frontend Performance

Tree-shake CSS?

PurgeCSS, Tailwind JIT — remove unused selectors based on actual usage. Replace modules without full page reload during dev — preserves state, fast feedback. First request to a new domain: 20-100ms; multiplied across third-party domains adds up. When useEffect is sufficient — async timing avoids blocking paint.

Question 39 Frontend Performance

Why does perceived performance differ from raw speed?

Replaced FID in 2024. Time from user interaction to visible response. Good ≤ 200ms. Tasks taking > 50ms on the main thread — block input responsiveness. Users care about how quickly the interface feels useful, not just how fast every asset finishes loading. Removing whitespace, shortening identifiers, simplifying expressions — typically 30–60% smaller.

Question 40 Frontend Performance

Why ship smaller bundles even with caching?

First-visit experience matters; cache often gets evicted; parse/compile cost scales with bundle size every time. Specificity wars hurt maintainability; cascades become unpredictable; not a perf issue but a hygiene one. Unused CSS increases transfer size and can slow style calculation without helping the current screen. First request to a new domain: 20-100ms; multiplied across third-party domains adds up.

Question 41 Frontend Performance

scheduler.yield()?

SVGO removes editor metadata, redundant attributes — often 30–50% size reduction. Large bundles slow parsing, compilation, and execution in addition to network transfer. New API to yield back to the main thread mid-task, allowing input events to be processed. Use facade like lite-youtube-embed; defer iframe creation until click.

Question 42 Frontend Performance

What is the importance attribute (Priority Hints)?

CSS property — content-visibility: auto; tells browser to skip rendering off-screen children. For predictable performance, mirror small critical assets to your origin — controlled cache and version. Performance, Accessibility, Best Practices, SEO, PWA — synthetic lab tests at one viewport/network. fetchpriority="high|low|auto" — hint resource priority to the browser.

Question 43 Frontend Performance

What are Core Web Vitals?

LCP (Largest Contentful Paint), INP (Interaction to Next Paint), CLS (Cumulative Layout Shift) — Google's UX-quality signals. Profile main thread work, paint, layout, scripting — identify long tasks and rendering bottlenecks. Each route ships only its specific code + shared chunks — minimizes initial JS for SPA. Code splitting breaks JavaScript into smaller chunks so users download only what is needed for the current page.

Question 44 Frontend Performance

What is "react-window"?

TTFB measures how long it takes the browser to receive the first byte of the response after making a request. Library for windowed virtual lists/grids — only renders visible rows. Return cached version; in background fetch fresh; update cache. Modern browsers ship many APIs natively (fetch, IntersectionObserver) — drop polyfills as support grows.

Question 45 Frontend Performance

Bundle splitting strategy?

Prefetching downloads likely future resources at low priority to improve the next navigation. Render HTML on the server; ship to client; hydrate with JS — improves LCP and SEO. <img> respects loading=lazy, srcset, alt text. Use background-image only for decorative tiling. Vendor bundle (changes rarely), app bundle (changes often), per-route chunks — maximizes cache hit.

Question 46 Frontend Performance

Compositor-friendly animations?

Throttling limits how often a function runs during rapid events like scroll or resize. Animate transform and opacity only — runs on GPU thread without re-layout/repaint. Vite uses esbuild for dev and rollup for prod — significantly faster dev startup. Lighthouse is lab; CrUX is real-user (RUM) data from Chrome users.

Question 47 Frontend Performance

Compression-only headers (X-Content-Encoding)?

Prefetching downloads likely future resources at low priority to improve the next navigation. Replace modules without full page reload during dev — preserves state, fast feedback. Preloading tells the browser a resource will be needed soon so it can fetch it earlier. Standard is Content-Encoding; ensure infrastructure isn't double-compressing or mangling.

Question 48 Frontend Performance

Why avoid !important?

Specificity wars hurt maintainability; cascades become unpredictable; not a perf issue but a hygiene one. It can improve first render and SEO by sending meaningful HTML before client-side JavaScript finishes loading. Advertises HTTP/3 support so future connections upgrade — important for QUIC adoption. Throttling limits how often a function runs during rapid events like scroll or resize.

Question 49 Frontend Performance

Workbox?

Google library that simplifies Service Worker caching strategies (network-first, cache-first, etc.). State updates inside event handlers, promises, timeouts batch into single re-render in React 18+. scheduler.postTask(fn, {priority: 'background'}) — explicit task scheduling with priorities. Worst-case interaction latency observed during page visit (with some smoothing) — captures real interaction pain.

Question 50 Frontend Performance

Why should unused CSS be removed?

Performance, Accessibility, Best Practices, SEO, PWA — synthetic lab tests at one viewport/network. Hydration cost is the time and CPU needed to attach interactivity to server-rendered HTML on the client. Tree shaking removes unused exports from a bundle during build so less code ships to the browser. Unused CSS increases transfer size and can slow style calculation without helping the current screen.