Frontend Engineering

Frontend staff work sits at the intersection of user-perceived correctness, inclusive UX, performance under hostile devices, and operability (debuggability, errors, rollout). Interviewers probe whether you reason from constraints and metrics, not library slogans.

How to use this page

• Skim Core basics once to ensure vocabulary is crisp.
• Drill Recognition cues before mocks—practice mapping prompts → risks → experiments.
• Run Study pattern sessions verbatim on a timer.
• Keep Interview scripts handy as spoken templates (adapt to your voice).

---

Topic study plan (deep pages)

Deep dives live under /frontend/topics/.... Use the hub for the roadmap; use topic pages for implementation details, failure modes, and interview-ready tradeoffs.

Author-only topic scaffold (`publishDocs: false` — not mirrored into the Next build tree): `content/core-docs/frontend/topics/topic-page-template.mdx`.

---

Core basics

0. Frontend 2026 senior checklist

This is the comprehensive checklist for senior frontend preparation. It keeps the split between Under the Hood mechanisms and Modern Standards: first understand how the browser and framework actually execute work, then connect that to current platform, React, Next.js, accessibility, security, SEO, and performance expectations.

I. Browser architecture & the rendering engine

Focus on the physics of how code becomes pixels.

The Critical Rendering Path (CRP):

• DOM and CSSOM construction.
• Render Tree vs Layout Tree vs Layer Tree.
• Reflow (Layout) vs Repaint: which properties trigger which stage.
• The Compositor Thread: moving work off the main thread; GPU acceleration.
• Hardware Acceleration: using will-change and 3D transforms carefully.

Browser Engines:

• Chromium/Blink: V8 engine internals and Just-In-Time (JIT) compilation.
• WebKit: Nitro engine and Apple's implementation of standards.
• Gecko: Quantum and parallel CSS parsing.
• WebView Constraints: memory isolation and bridge overhead in mobile.

Compatibility:

• Polyfills vs Ponyfills.
• PostCSS: Autoprefixer logic.
• Baseline: the web industry's cross-browser feature-support signal.

II. HTML5 & the Canvas API

Deep dive into programmatic rendering and structural semantics.

The Canvas API:

• Immediate Mode Rendering: how it differs from retained mode in the DOM.
• The Render Loop: requestAnimationFrame vs setInterval.
• Canvas Contexts: 2d, webgl, and webgpu for high-performance rendering.
• OffscreenCanvas: running canvas logic in a Web Worker to keep the UI responsive.

Modern HTML:

• Web Components: Shadow DOM, Custom Elements, and HTML Templates.
• Semantic SEO: Microdata, Schema.org, and JSON-LD.
• Resource Prioritization: fetchpriority, loading="lazy", and rel="preload" / rel="prefetch".

III. CSS: layout, logic & binding

How styles bind to the view and how logic has moved into CSS.

Binding Mechanisms:

• CSS Cascading & Inheritance: specificity scoring and the @layer (Cascade Layers) rule.
• CSS Variables (Custom Properties): runtime manipulation through JavaScript with setProperty.

Modern Layout:

• Flexbox & Grid: including subgrid for nesting grid definitions.
• Container Queries: @container for component-driven responsiveness.

Animations:

• CSS Transitions vs Keyframes.
• Web Animations API (WAAPI): controlling CSS animations via JavaScript.
• Scroll-Driven Animations: @scroll-timeline.

IV. Core JavaScript (ESNext)

The engine behind the logic.

• Execution Context: call stack, memory heap, and the Event Loop with macrotasks vs microtasks.
• Prototypal Inheritance: the __proto__ vs prototype distinction.
• Memory Management: garbage collection, mark-and-sweep, and avoiding leaks from closures, event listeners, detached DOM, caches, and subscriptions.
• Asynchronous JS: Promises, top-level await, and AbortController.
• Web Workers: multi-threading in the browser when main-thread contention is the bottleneck.

V. React 19: the compiler era

The shift from manual optimization to automated performance.

Core Working:

• The Virtual DOM & Reconciliation: how the diffing algorithm maps new element output to committed DOM updates.
• React Fiber: time-slicing and interruptible rendering.
• Hydration: converting static HTML into an interactive React app.

React Features:

• React Server Components (RSC): the serialization protocol and client-boundary model.
• Suspense & Streaming: progressive hydration and useful shells while async work resolves.
• The React Compiler (Forget): automatic memoization where the compiler is enabled.
• Hooks Deep Dive: useActionState, useOptimistic, and useFormStatus.

State Management:

• Context API vs Signals.
• External Stores: Zustand, Recoil, or Redux Toolkit.
• Server State: TanStack Query for caching, stale-while-revalidate behavior, prefetching, and invalidation.

VI. Next.js 15+: the framework standard

The bridge between frontend and backend.

Rendering Patterns:

• SSR (Server-Side Rendering).
• SSG (Static Site Generation).
• ISR (Incremental Static Regeneration).
• PPR (Partial Prerendering): combining static and dynamic rendering in one request.

Routing & Data:

• App Router: file-based routing, layouts, and templates.
• Server Actions: direct RPC-style mutations.
• Middleware: Edge Runtime functions for auth, redirects, rewrites, and request shaping.

Next.js Server vs API:

• The Node.js vs Edge runtime environment.
• Differences in headers, cookies, and caching strategies.
• Data Cache vs Full Route Cache vs client router cache vs CDN/browser cache.

VII. Expert pillars: a11y, security & performance

The non-functional requirements of a senior frontend engineer.

Accessibility (A11y):

• WCAG 2.2 Standards.
• Focus Traps & Keyboard Interactivity.
• WAI-ARIA Roles: aria-live, aria-expanded, role="combobox".

Security:

• XSS & CSRF Mitigation.
• Content Security Policy (CSP) Headers.
• Sanitization: DOMPurify and Trusted Types.

SEO:

• Core Web Vitals: LCP, CLS, and INP (Interaction to Next Paint).
• Dynamic Metadata & Open Graph.
• Robots.txt & Sitemap management.

Canvas follow-up path: if the role is Canvas-heavy, deepen into the math behind 2D transformations, matrices, coordinate systems, hit testing, and scene modeling. If the role is framework-heavy, deepen into the browser implementation side: rendering, scheduling, hydration, and cache boundaries.

1. Document lifecycle & rendering pipeline

Understanding where time goes is non-negotiable.

For the full 2026 topic map, including Canvas, Web Components, modern CSS, ESNext, React 19, Next.js 15+, a11y, security, SEO, and Core Web Vitals, start with Frontend 2026 senior checklist.

Pipeline (say this order in-room)

Deep narrative (HTML/CSS + React placement + hydration): Browser, HTML/CSS & React + hydration.

1. Parse HTML/CSS into DOM/CSSOM.
2. Style computation (“recalc style”) resolves what rules apply to which nodes.
3. Layout (“reflow”) computes geometry (sizes/positions).
4. Paint fills pixels for affected regions.
5. Composite merges layers/GPU uploads for final frame.

Forced synchronous layout (“layout thrash”)

• Reading geometry (offsetWidth, getBoundingClientRect) after writes that invalidate layout forces the browser to flush mid-JavaScript.
• Interview soundbite: “Batch reads together, batch writes together; if you interleave read/write layout properties in loops, main-thread time explodes.”

Layers, will-change, and promoters

• Compositing layers can isolate expensive paints—but each layer consumes GPU memory.
• Explain you’d validate with Performance panel (Frames, Layers) and disable blind will-change: transform sprinkled everywhere.

2. Main thread vs workers

Say when you’d yield (scheduler, chunked requestAnimationFrame, chunked reducers) vs move work off-thread.

3. Events, input, and scroll performance

• Passive listeners: for scroll/touch handlers that don’t preventDefault, mark passive where allowed so scrolling isn’t artificially blocked on the compositor thread.
• Debouncing/throttling: articulate why—you’re trading freshness vs churn; infinite scroll prefers IntersectionObserver.
• Input delay: distinguish composition events for IME users (don’t strip these in hot paths).

4. Networking, HTTP, caching

Cache semantics (common interview trap)

Articulate ETag / 304: good for correctness and bandwidth; stale while revalidate patterns for dashboards.

5. Fonts, images, and layout stability

• CLS discipline: intrinsic sizes, CSS aspect-ratio, skeletons that preserve space.
• font-display trade: swap vs optional affects FOIT/FOUT versus brand fidelity—tie to Lighthouse field vs lab.
• Responsive images: sizes + appropriate resolution; decoding strategy (loading="lazy" with care for LCP candidate).

6. Application state architecture

Map explicit owners—duplicated truth is bug territory.

SSR / streaming / suspense (framework-agnostic narratives)

Classes of bugs interviewers needle:

1. Double data fetch — server fetched, client ignores hydration payload.
2. Clock/randomness mismatches serialized HTML ≠ client markup.
3. Environment-only APIs used during render (window).
4. Partial hydration mismatches for islands vs full tree.

Solutions cluster around: deterministic render, delaying client-only bits, aligning query keys/dehydrate contracts.

7. Forms, validation, UX contracts

Accessible forms are a baseline:

• Announce errors with associated labels (aria-describedby) and programmatic focus moves on first invalid field.
• Optimistic UI needs rollback choreography and idempotency hints from APIs.
• Race resolution: last-response-wins policies when multiple submissions overlap.

8. Accessibility (deep enough for staff probes)

Operationalize WCAG thinking without memorizing guideline numbers verbatim:

Keyboard & semantics

Every interactive surface must expose:

• Visible focus ring conventions (don't “design away” outlines without replacement cues).
• Tab order matches reading order. Dialogs trap focus and restore prior focus on exit.
• Use native elements when possible (button, a, input)—explain cost of reinventing semantics.

Screen readers

• Roles & names: icon-only buttons poison UX—expose aria-label or textual sibling.
• Live regions: async updates (“saved”, “failed”) should be aria-live with polite vs assertive tradeoffs.

Motion & cognition

Offer prefers-reduced-motion adaptations; autoplay respects user settings.

---

Understanding

Performance is multi-metric—not one Lighthouse score

Articulate combos:

Synthetic lab vs field (RUM) — regressions sneak only on low-end phones if you optimize lab desktop only.

Frameworks amplify data-flow mistakes more than reconciliation cost

Discuss memo boundaries, avoiding huge context blobs, selectors, virtualization of large rendered trees—not “virtual DOM expensive.”

Security & privacy touch FE

Briefly cite Content-Security-Policy narrowing injection blast radius—tie to /security.

---

Recognition cues

Map surface phrases to engineering lenses:

Interview follow-ups to expect

Explain instrumentation:

• Performance trace timestamps for long frames.
• Coverage spikes after dependency addition.
• Layout shift clusters anchored to problematic nodes.

Articulate rollback: feature flag disabling heavy client bundles.

Topic drill map

Use the deep pages when a prompt names a concrete failure mode:

For mock interviews, force every answer through five sentences: mechanism, user impact, measurement, tradeoff, regression guard.

---

Memory hooks

• Thrashing mantra: reads batch, writes batch — never alternate hot.
• RAIL-lite: Respond fast; animate within frame budget when possible; defer idle fluff; prioritize critical load path.
• Contract triplet: correctness of data freshness, honest error UX, reachable keyboard path.

---

Study pattern

Session A — Cold triage (10 min)

Prompt yourself with a vague bug (“checkout feels sluggish”). Produce:

1. Hypothesis buckets (network / CPU / idle blocking / layout thrash).
2. First instrumentation click path.
3. One low-risk mitigation + how you’d regression-guard.

Session B — Architecture sheet (35 min)

Draw:

Routes → Data layer boundaries → Skeleton states → Error surfaces → Telemetry events (semantic names). Add SSR boundary markings.

Session C — A11y + perf combo (15 min)

Take a modal flow; narrate keyboard path + focus restore + simultaneous animation budget justification.

---

Diagrams

Rendering / triage

State ownership sanity

---

Pitfalls cheat sheet

• Treating SSR as “SEO only” vs deterministic contract discipline.
• “We virtualized”—but unstable row heights ⇒ scroll jank nightmares.
• Global CSS animations ignoring motion preferences.
• Feature shipping without offline / flaky UX story when product depends on flaky networks.

---

Interview scripts (adapt, don’t parrot)

Opening triage:

“I’d separate perceived latency vs server latency—pull a timeline trace to see whether we’re blocking the main thread, waiting on network critical path assets, or thrashing layout. Then I tie it to UX metrics (INP/LCP/CLS depending on symptom). Only after locality do we pick optimizations.”

Hydration:

“Mismatch means the serialized HTML expectation diverged from the client’s first paint—typically non-deterministic data, environment APIs in render paths, divergent caches, or double-fetch skipping dehydrated payload—I’d converge on deterministic render boundaries and unify data providers.”

---

Where to deepen next

• Language mechanics: /languages/javascript, /languages/typescript
• Holistic bottleneck framing: /performance
• Trust boundaries touching FE: /security
• Huge product scope: /dsa/system-design/templates/interview-framework