Front-end Web Development Performance Optimization Syllabus

What two key heuristic assumptions does React's reconciliation algorithm make to achieve $O(n)$ diffing?

1) Two elements of different types produce different trees (so the old subtree is torn down and rebuilt), and 2) Developers can hint stable identity of children across renders using a key prop.

What happens during reconciliation when an element changes its type (e.g., <div> becomes <span>)?

React tears down the entire old subtree (unmounting components and destroying their state) and builds the new subtree from scratch, rather than trying to match the children.

What is the purpose of the 'key' prop when rendering lists in React?

The key gives each list item a stable identity across renders so reconciliation can match elements, reuse/move existing DOM nodes and component state, and avoid unnecessary re-creation or mis-association of items.

Why is using an array index as a list 'key' often discouraged?

When the list is reordered, filtered, or items are inserted/removed, index-based keys no longer map to stable items, causing React to mis-match elements, leading to incorrect state retention and unnecessary DOM updates.

What is the difference between the 'render phase' and the 'commit phase' in React reconciliation?

The render phase builds the new virtual tree and diffs it (can be paused/aborted and is side-effect-free); the commit phase applies the computed changes to the real DOM and runs effects (must run synchronously to completion).

What is React Fiber?

React Fiber is the reconciliation engine (introduced in React 16) that re-implements the algorithm to support incremental rendering: work can be split into units, paused, prioritized, and resumed, enabling features like concurrent rendering.

What does 'diffing' produce as its output in a Virtual DOM library?

Diffing produces a set of minimal changes (a patch/effect list) describing which nodes to add, remove, move, or update, which is then applied to the real DOM in the commit step.

What is the difference between eager loading and lazy loading?

Eager loading fetches resources upfront during the initial load (good for critical content), while lazy loading defers fetching until the resource is needed (good for non-critical/off-screen content).

What is 'prefetching' and how does it relate to lazy loading and code splitting?

Prefetching loads a likely-needed chunk or resource during browser idle time (e.g., via <link rel="prefetch">) so that when the user navigates, the lazily-split chunk is already cached, eliminating the on-demand load delay.

What is the difference between <link rel="preload"> and <link rel="prefetch">?

preload fetches a resource needed for the current page with high priority (fetched early); prefetch fetches a resource likely needed for a future navigation at low priority during idle time.

What is a 'chunk' in the context of code splitting?

A chunk is one of the separate output bundles produced when a bundler splits the codebase; each chunk can be loaded independently, on demand or in parallel.

How does a Suspense boundary handle multiple lazy components loading at once?

A single <Suspense> boundary waits for all lazy components inside it to load before revealing its content, showing the fallback meanwhile. Nesting boundaries allows independent/granular loading states.

What metric measures how long until a page becomes fully interactive, often improved by lazy loading and code splitting?

Time to Interactive (TTI) — the time until the page is reliably responsive to user input. Reducing initial JavaScript via splitting and lazy loading lowers TTI.

What is 'render-blocking' JavaScript and how does code splitting help?

Render-blocking JavaScript is script that must be downloaded, parsed, and executed before the page can render or become interactive. Code splitting reduces the amount loaded upfront, shrinking the render-blocking payload.

In Virtual DOM diffing, what happens to children that have the same key but a new position in the list?

React reuses the existing DOM node and component instance (preserving its state) and simply moves it to the new position, instead of destroying and recreating it.

What is 'batching' of updates in a Virtual DOM library?

Batching groups multiple state updates within the same event/cycle into a single re-render and a single reconciliation pass, avoiding redundant intermediate DOM mutations and improving performance.

What is the relationship between the Virtual DOM and reconciliation?

The Virtual DOM is the data structure (the in-memory tree); reconciliation is the algorithm/process that diffs successive Virtual DOM trees and reconciles the real DOM to match the latest one.

Does using a Virtual DOM make an application universally faster than direct DOM manipulation?

No. The Virtual DOM adds overhead (building and diffing trees). Hand-optimized direct DOM updates can be faster; the Virtual DOM's value is predictable, declarative updates with good-enough performance at scale, not absolute peak speed.

What is component-level (component-based) code splitting?

Splitting at the level of individual components so that a heavy or infrequently-used component (e.g., a modal, chart, or editor) loads its own chunk only when it is rendered.

What is the purpose of a 'skeleton screen' or placeholder when lazy loading content?

It reserves space and provides visual feedback while deferred content loads, improving perceived performance and preventing layout shift (reducing CLS).

Which Core Web Vital can be negatively affected by poorly implemented lazy loading, and why?

Cumulative Layout Shift (CLS), because content that loads in without reserved dimensions pushes other elements around, causing visible layout jumps. Largest Contentful Paint (LCP) can also worsen if the LCP image is lazy-loaded.

What is the difference between static and dynamic imports in JavaScript?

A static import (import x from 'y') is resolved at build/parse time and always included in the bundle; a dynamic import() is evaluated at runtime, returns a Promise, and enables on-demand code splitting.

In reconciliation, what does it mean that the diffing algorithm compares trees 'level by level' (breadth/level comparison)?

React compares nodes at the same position/level of the two trees rather than searching across levels. Moving a subtree to a different depth is treated as removing it and creating it anew, keeping the diff linear.

What is the benefit of code splitting for a returning user with a warm cache?

Unchanged chunks (especially vendor chunks with stable content hashes) are served from cache, so the returning user downloads only the chunks that changed, dramatically reducing repeat-visit load time.

How do lazy loading and code splitting work together in a typical SPA route?

The build tool code-splits each route into its own chunk, and the router lazy loads that chunk only when the user navigates to the route, so the initial bundle excludes code for unvisited pages.

What is 'hydration' and how can lazy loading reduce its cost?

Hydration attaches event listeners/interactivity to server-rendered HTML on the client. Lazy/partial hydration defers hydrating non-critical or off-screen components, reducing main-thread work and improving TTI.

Why does React require a single root element (or fragment) when reconciling a component's output?

Reconciliation diffs trees node by node; a component must return one tree root so React can consistently match and patch it. Fragments (<>...</>) let you return multiple children without adding an extra DOM node.

What is the trade-off of over-splitting code into too many tiny chunks?

Too many small chunks add network request overhead (HTTP round-trips, headers) and can hurt performance due to request waterfalls, offsetting the benefit of smaller payloads. Chunk sizes should be balanced.

During reconciliation, what determines whether a component instance is preserved or recreated between renders?

Its position in the tree and its element type (and key, for list children). If the type and position match, React preserves the instance and its state; if the type differs, it unmounts the old and mounts a new one.

What is the difference between 'diffing' and 'patching' in a Virtual DOM cycle?

Diffing computes the differences between the previous and new virtual trees (producing a list of changes); patching applies those computed changes to the real DOM. Diffing is analysis; patching is mutation.