Frontend¶

What experienced frontend engineers forget before an interview, grouped by subtopic. For language mechanics see javascript.md and typescript.md; for web vulnerabilities and token storage see security.md; for React and Next.js see react.md and nextjs.md.

Rendering strategies¶

CSR, SSR, SSG, ISR¶

Streaming SSR and hydration¶

• Streaming SSR flushes HTML in chunks, so the shell paints before slow data-dependent sections resolve.
• Hydration runs the render on the client and attaches listeners to the server HTML, reusing the DOM instead of recreating it.
• A hydration mismatch (server and client render different output) can force the framework to re-render that part on the client — React's causes and fixes in react.md.

Islands and Server Components¶

• Islands architecture: the page is static HTML; only interactive islands ship JS and hydrate independently.
• React Server Components render only on the server and send serialized output, not code — only Client Components ship JS and hydrate (see react.md).

Client-side routing¶

• The router intercepts navigation and updates the URL with the History API (pushState), no full reload.
• A refresh on /profile hits the server, which must fall back to index.html for unknown paths or it 404s.

Browser pipeline¶

Critical rendering path¶

• HTML → DOM, CSS → CSSOM → render tree (visible nodes) → layout → paint → composite (critical rendering path).
• CSS is render-blocking; a classic <script> is parser-blocking.

Script loading: async, defer, module¶

• async: downloads in parallel, runs as soon as it arrives, no order guarantee.
• defer: downloads in parallel, runs in order after parsing; type="module" is deferred by default.

Compositor-only animation¶

• Changing width/top re-runs layout + paint + composite; transform/opacity can skip to composite on the GPU once the element has its own layer.
• will-change: transform hints the browser to promote a layer ahead of time; too many layers waste GPU memory.

Layout thrashing¶

• Alternating reads (offsetHeight) and writes (style.width) in a loop forces a synchronous reflow each time.
• Batch all reads, then all writes — or schedule writes in requestAnimationFrame.

CSS¶

Specificity and the cascade¶

• Specificity: inline > ID > class/attribute/pseudo-class > element; cascade layers and origin rank above specificity, and !important inverts layer order.

Stacking contexts¶

• z-index only compares elements within the same stacking context — why z-index: 9999 sometimes "doesn't work".
• opacity < 1, transform, filter, position: fixed, and positioned elements with a z-index each create a new context.

Modern CSS features¶

• Container queries (@container) style a component by its container's size, not the viewport — reusable responsive components.
• :has() selects a parent by its children (form:has(:invalid)), which used to need JavaScript.

View transitions¶

• The View Transition API animates between two DOM states: document.startViewTransition(update) snapshots old and new, then cross-fades or morphs elements sharing a view-transition-name.
• Multi-page apps opt in to cross-document transitions with @view-transition { navigation: auto }.

Performance¶

Core Web Vitals¶

Fixing Web Vitals¶

• LCP: preload the hero image or font, cut render-blocking resources, fast TTFB.
• INP: break long tasks (> 50 ms) and yield to the main thread (scheduler.yield()).
• CLS: reserve space with width/height or aspect-ratio.

Bundle size¶

• Code splitting by route or with dynamic import() keeps the first bundle to what the first screen needs.
• Tree shaking needs ES modules; "sideEffects": false also lets the bundler drop unused modules whole — list CSS and polyfill files as exceptions.

Images¶

• srcset/sizes let the browser pick a resolution per viewport; AVIF/WebP are much smaller than JPEG/PNG.
• loading="lazy" for below-the-fold images — never on the LCP image, which should get fetchpriority="high".

Main-thread offloading¶

• Web Workers run JS on another thread (no DOM access), talking via postMessage (structured clone, or transfer an ArrayBuffer for free).
• content-visibility: auto skips layout and paint for off-screen sections.

Resource hints¶

• preload: fetch this exact resource now, it's needed for the current page.
• prefetch: low-priority fetch for a likely next navigation.
• preconnect: open DNS + TCP + TLS early when the resource URL isn't known yet.

Caching¶

Cache-Control directives¶

• no-cache means revalidate every time, not "don't cache"; no-store means never store.
• max-age applies to every cache; s-maxage overrides it for shared caches (CDN).

Hashed assets and validators¶

• Long max-age + immutable on content-hashed filenames (app.a3f9c1.js), with HTML served no-cache — each deploy is a new URL.
• ETag/Last-Modified let the server answer 304 Not Modified — saves the body, not the round trip.

Browser storage¶

Any XSS can read all of them except HttpOnly cookies — token storage in security.md.

Service workers¶

• Service workers implement cache-first, network-first, or stale-while-revalidate strategies and offline support.
• A waiting service worker is a common reason users keep seeing the old deploy.

Accessibility¶

Semantic HTML and ARIA¶

• Native elements (<button>, <nav>, <label>) come with keyboard, focus, and screen-reader behavior for free.
• First rule of ARIA: don't use ARIA when a native element already has the semantics.

Focus management in SPAs¶

• Client-side navigation doesn't reset focus — move focus to the new view's heading on route change.
• Everything clickable must be keyboard-reachable with a visible focus indicator; a <dialog> opened with showModal() makes the rest of the page inert.

Contrast¶

• WCAG AA: 4.5:1 for normal text, 3:1 for large text and UI components.
• Never convey information by color alone (error states need text or an icon).