Frontend 2026 senior checklist

This page is the high-level map for senior frontend study. Use it to connect under-the-hood mechanisms with modern production standards. The interview bar is not naming APIs; it is explaining what work moves through the browser, what runs on the main thread, where framework boundaries sit, and how those choices affect users.

1. Browser architecture & rendering engine

Focus on the physics of how code becomes pixels.

Critical rendering path

• DOM and CSSOM construction: HTML produces the DOM; CSS produces the CSSOM; selector matching plus the cascade produce computed styles.
• Render tree vs layout tree vs layer tree: the browser derives visible boxes, calculates geometry, then decides which painted surfaces become composited layers.
• Reflow/layout vs repaint: geometry-affecting changes require layout; visual-only changes may require paint; transform/opacity animations can often stay in composite.
• Compositor thread: smoothness improves when eligible work moves away from the main thread, but DOM, style, layout, and most JS still contend for main-thread time.
• Hardware acceleration: will-change, transform, and 3D transforms can promote layers; overuse burns GPU memory and can regress mobile performance.

Browser engines

Compatibility

• Polyfills vs ponyfills: polyfills patch global behavior; ponyfills export explicit helpers and avoid global mutation.
• PostCSS and Autoprefixer: compatibility should be generated from target browsers, not hand-maintained prefixes.
• Baseline: use browser-support maturity as a release decision tool; progressive enhancement still matters for sharp edges.

2. HTML5 & Canvas API

Deep dive into structural semantics and programmatic rendering.

Canvas API

• Immediate mode rendering: Canvas redraws pixels imperatively; unlike DOM, the browser does not retain semantic objects for you.
• Render loop: prefer requestAnimationFrame for visual work because it aligns with the browser frame lifecycle; setInterval can drift and fight the renderer.
• Contexts: 2d for raster drawing, webgl for GPU-backed graphics, and webgpu for modern high-performance GPU workloads where support and product risk fit.
• OffscreenCanvas: move canvas rendering to a Worker when heavy draw logic would otherwise block input; account for message-passing and asset-transfer costs.

Modern HTML

• Web Components: Custom Elements define behavior, Shadow DOM scopes internals, and HTML templates enable inert reusable markup.
• Semantic SEO: honest landmarks, headings, Microdata, Schema.org, and JSON-LD help crawlers and assistive tech consume product meaning.
• Resource prioritization: fetchpriority, loading="lazy", rel="preload", and rel="prefetch" are levers for discovery order; misuse can delay the true LCP resource.

3. CSS: layout, logic & binding

Modern CSS is no longer only a styling layer; it carries responsive logic, stateful animation hooks, and design-system contracts.

Binding mechanisms

• Cascade and inheritance: reason through origin, importance, specificity, source order, and inheritance before blaming "CSS randomness."
• Cascade Layers (@layer): define predictable precedence between reset, tokens, components, utilities, and overrides.
• Custom properties: CSS variables are runtime values; JavaScript can update them through setProperty without rebuilding class names.

Modern layout

• Flexbox: one-dimensional distribution and alignment.
• Grid and subgrid: two-dimensional layout; subgrid lets nested children align to parent tracks.
• Container queries: @container makes components respond to their allocated space, not only viewport width.

Animation

• Transitions vs keyframes: transitions are state-to-state; keyframes are timeline-driven.
• Web Animations API (WAAPI): JavaScript control over animation playback, timing, and cancellation.
• Scroll-driven animations: @scroll-timeline and related APIs bind animation progress to scroll state; test support and reduced-motion behavior.

4. Core JavaScript (ESNext)

Senior frontend work depends on understanding the runtime, not just syntax.

• Execution context: call stack, memory heap, lexical environment, and the event loop.
• Macrotasks vs microtasks: timers, IO, and user events schedule differently from promise continuations; starvation bugs often hide in microtask-heavy flows.
• Prototypal inheritance: prototype is the function/object used to build instances; __proto__ is the instance's prototype link.
• Memory management: garbage collection is generally mark-and-sweep; leaks often come from retained closures, event listeners, caches, detached DOM, and subscriptions.
• Async JavaScript: Promises, top-level await, AbortController, cancellation-aware fetches, and race handling.
• Web Workers: use workers for CPU-heavy tasks, parsing, encoding, search, or canvas work when transfer overhead is lower than main-thread contention.

5. React 19: compiler-era React

The shift is from hand-optimizing every component toward clearer data flow plus compiler-assisted memoization where the toolchain supports it.

Core working

• Virtual DOM and reconciliation: React renders element descriptions, compares them against the previous Fiber tree, and commits DOM mutations.
• Fiber: work is split into units with priorities so rendering can be interrupted and resumed for responsiveness.
• Hydration: static HTML becomes interactive when React attaches Fiber state and event handling to matching DOM.

React features

• React Server Components (RSC): server-only components render into a serialized payload; only client boundaries hydrate.
• Suspense and streaming: render useful shells while async server/client boundaries resolve progressively.
• React Compiler: automatic memoization can reduce manual useMemo/useCallback pressure, but it does not fix unstable data ownership.
• Modern hooks: useActionState, useOptimistic, and useFormStatus model mutation state, optimistic UX, and form submission status close to the UI.

State management

Compare Context API vs signals by update fan-out and mental model. Compare Zustand, Recoil, Redux Toolkit, or similar stores by devtools, ecosystem, mutation discipline, and team familiarity.

6. Next.js 15+ framework standard

Next sits at the frontend/backend boundary: routing, data fetching, caching, rendering, deployment, and HTTP behavior are coupled.

Rendering patterns

• SSR: request-time HTML when freshness, personalization, or auth requires it.
• SSG: build-time static output for stable pages.
• ISR: static output with controlled revalidation.
• PPR: partial prerendering combines static shells with dynamic request-time holes when the deployment target supports it.

Routing and data

• App Router: file-based routing, nested layouts, templates, loading states, error boundaries, and route groups.
• Server Actions: direct mutation entry points; treat them as RPC endpoints with authentication, authorization, validation, and replay/idempotency thinking.
• Middleware: edge/runtime functions for auth gates, redirects, rewrites, locale routing, and request shaping.

Server vs API concerns

• Node.js vs Edge runtime: APIs, filesystem access, cold starts, streaming behavior, and dependency compatibility differ.
• Headers, cookies, and caching: dynamic request access can change cache eligibility.
• Cache layers: distinguish Data Cache, Full Route Cache, client router cache, CDN cache, and browser cache before debugging stale UI.

7. Expert pillars: a11y, security, SEO & performance

These are production requirements, not polish.

Accessibility

• WCAG 2.2: use it as product acceptance criteria, not only audit vocabulary.
• Focus traps and keyboard interactivity: dialogs, menus, comboboxes, grids, and overlays need predictable focus movement and escape behavior.
• WAI-ARIA: use roles and states such as aria-live, aria-expanded, and role="combobox" only when native elements cannot express the interaction.

Security

• XSS mitigation: avoid unsafe DOM sinks, escape by default, and understand framework guarantees.
• CSRF mitigation: same-site cookies, tokens where needed, and server-side authorization on every mutation.
• CSP headers: reduce injection blast radius; pair with nonce/hash strategy and third-party governance.
• Sanitization: use libraries such as DOMPurify for untrusted HTML and Trusted Types for stricter DOM sink control where available.

SEO and performance

• Core Web Vitals: LCP, CLS, and INP are user-experience signals; optimize with field data, not only lab snapshots.
• Dynamic metadata and Open Graph: metadata must match route, locale, auth visibility, and cache policy.
• Robots and sitemap management: generate discoverable URLs intentionally and keep private or duplicate surfaces out of indexing.

Interview framing

When answering senior frontend questions, speak in this order:

1. Mechanism: what the browser/framework actually does.
2. Constraint: main thread, network, memory, cache, accessibility, or security boundary.
3. Instrumentation: trace, RUM metric, accessibility walkthrough, bundle analyzer, network waterfall, or server logs.
4. Tradeoff: what the optimization costs and when you would roll it back.

For Canvas-heavy roles, deepen next into 2D transform matrices, coordinate spaces, hit testing, retained-scene modeling over immediate-mode drawing, and OffscreenCanvas worker transfer patterns. For product-platform roles, deepen next into React/Next.js cache boundaries and deterministic hydration.

See also

• Rendering pipeline & compositing
• Browser, HTML/CSS & React + hydration
• Main-thread scheduling
• React — rendering & architecture
• Next.js App Router, SSR & caches
• Accessibility semantics & keyboard
• /frontend