Frontend Platform Engineering — A Working Reference

A reference for the areas a frontend platform engineer is expected to reason about: web protocols and security, core web platform concepts, performance and bundling, and testing. Every topic follows the same shape — What it is · Example · Trade-offs · Follow-ups — so it can be used for lookup and revision rather than read front to back.

1. How to use this reference

Each topic is short on purpose. The definitions are written to survive a follow-up question, and the trade-off line is the part worth memorising — knowing that a technique exists is cheap, knowing what it costs is the part that transfers.

Three passes. First pass: read the definitions and examples without memorising. Second pass: explain each topic aloud without looking. Third pass: answer the follow-up questions — they are where the real understanding shows.

1.1 The areas this covers

1.2 How each topic is laid out

• What it is — the definition, stated precisely enough to survive a follow-up.
• Example — code, a header, or a config fragment. Concrete, not illustrative prose.
• Trade-offs — what you give up, and the condition under which you'd choose otherwise.
• Follow-ups — the questions that come next. If you can answer these, you know the topic.

2. JavaScript core

2.1 Execution context and the call stack

What it is. Before code runs the engine creates an execution context holding a variable environment, a lexical environment and a this binding. Contexts stack on the call stack; the engine runs one at a time, LIFO.

Example. A stack trace is the call stack printed. RangeError: Maximum call stack size exceeded is that stack overflowing — typically unbounded recursion.

Trade-offs. The stack is synchronous and single-threaded. Anything long-running on it blocks rendering and input, which is the root of every INP problem.

Follow-ups. What's on the stack when a promise resolves? Why does a stack trace lose frames across an await?

More examples.

// 1 — the stack explains why this catch never fires
try {
  setTimeout(() => { throw new Error('boom'); }, 0);
} catch (e) {
  // unreachable: the callback runs later, on a fresh, empty stack
}

// 2 — but this one does, because await resumes the same logical frame
try {
  await Promise.reject(new Error('boom'));
} catch (e) {
  // caught
}

// 3 — recursion depth is finite; depth is roughly 10k frames in V8
const depth = (n = 0) => depth(n + 1);
try { depth(); } catch (e) { e.name; } // 'RangeError'

function a() { console.log('a'); b(); console.log('a done'); }
function b() { console.log('b'); c(); console.log('b done'); }
function c() { console.log('c'); }
a();

2.2 Hoisting and the temporal dead zone

What it is. Declarations are registered during the creation phase. var is initialised to undefined; function declarations are initialised fully; let, const and class are registered but uninitialised — reading them before the declaration throws. That window is the temporal dead zone.

Example.

console.log(a); // undefined
console.log(b); // ReferenceError — TDZ
var a = 1;
let b = 2;

foo();          // works — declaration hoisted whole
bar();          // TypeError: bar is not a function
function foo() {}
var bar = function () {};

Trade-offs. The TDZ turns a class of silent undefined bugs into loud errors, at the cost of ordering discipline.

Follow-ups. Why does the TDZ exist? Are function declarations hoisted inside blocks? What does typeof b do in the TDZ? (It throws — the one case where typeof is not safe.)

More examples.

// 1 — the loop-variable classic
for (var i = 0; i < 3; i++) setTimeout(() => console.log(i)); // 3 3 3
for (let i = 0; i < 3; i++) setTimeout(() => console.log(i)); // 0 1 2

// 2 — const protects the binding, not the value
const user = { name: 'Ada' };
user.name = 'changed';   // fine — the object is mutable
// user = {};          // TypeError: assignment to constant variable

// 3 — a function declaration inside a block is block-scoped in modules
if (true) { function f() {} }
// f is not reliably visible outside the block — use a const arrow instead

console.log(typeof x);
console.log(typeof y);
var x = 1;
let y = 2;

2.3 Scope, closures and the scope chain

What it is. A closure is a function plus a reference to the lexical environment it was created in. Lookup walks the scope chain outward to the global scope.

Example.

for (var i = 0; i < 3; i++) setTimeout(() => console.log(i)); // 3 3 3 — one binding
for (let i = 0; i < 3; i++) setTimeout(() => console.log(i)); // 0 1 2 — per-iteration binding

Trade-offs. Closures are the most common memory leak in long-lived SPAs: a listener closing over a DOM subtree keeps it alive after unmount. Guard with cleanup functions and AbortController.

Follow-ups. How would you implement once, memoise, or a private counter with a closure? How do closures cause detached-DOM leaks?

More examples.

// 1 — private state, no class needed
function counter() {
  let n = 0;                       // unreachable from outside
  return { inc: () => ++n, value: () => n };
}

// 2 — run-once, a closure over a boolean
const once = fn => {
  let done = false, result;
  return (...args) => done ? result : (done = true, result = fn(...args));
};

// 3 — memoise: the cache lives in the closure, not in global scope
const memo = fn => {
  const cache = new Map();
  return x => cache.has(x) ? cache.get(x) : (cache.set(x, fn(x)), cache.get(x));
};

function attach(node) {
  const bigData = new Array(1e6).fill(node.textContent);
  node.addEventListener('click', () => console.log(bigData.length));
}

const ac = new AbortController();
node.addEventListener('click', handler, { signal: ac.signal });
// later: ac.abort();  — removes the listener and releases the closure

2.4 The event loop

What it is. One turn: take one macrotask → run it to completion → drain the entire microtask queue → run requestAnimationFrame callbacks → style, layout, paint → requestIdleCallback if time remains.

• Macrotasks: setTimeout, setInterval, I/O, DOM events, postMessage, MessageChannel.
• Microtasks: promise continuations, queueMicrotask, MutationObserver.

Example.

console.log('1 sync');
setTimeout(() => console.log('5 macrotask'), 0);
Promise.resolve().then(() => console.log('3 microtask'));
queueMicrotask(() => console.log('4 microtask'));
console.log('2 sync');
// 1 sync, 2 sync, 3 microtask, 4 microtask, 5 macrotask

Trade-offs. A microtask that queues another microtask starves rendering forever; a setTimeout loop does not (nested timeouts clamp to 4ms after five levels). Microtasks give ordering guarantees at the cost of being unyielding.

Follow-ups. Predict the output of a mixed setTimeout/promise/async snippet. Why does Promise.resolve().then(spin) freeze the tab? Where does requestAnimationFrame run relative to microtasks?

More examples.

// 1 — await is microtask scheduling, so this prints 1 4 2 3
async function f() { console.log(2); await null; console.log(3); }
console.log(1); f(); console.log(4);
// 1 · 2 · 4 · 3  — the body runs synchronously up to the first await

// 2 — rAF runs after microtasks, before paint
Promise.resolve().then(() => console.log('micro'));
requestAnimationFrame(() => console.log('frame'));
// micro · frame

// 3 — yielding so input can be handled between chunks
async function process(items) {
  for (const [i, item] of items.entries()) {
    work(item);
    if (i % 100 === 0) await new Promise(r => setTimeout(r, 0));
  }
}

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => { console.log('3'); return Promise.resolve(); })
                 .then(() => console.log('4'));
queueMicrotask(() => console.log('5'));
(async () => { console.log('6'); await null; console.log('7'); })();
console.log('8');

2.5 Promises and async/await

What it is. await x splits the function: everything after it becomes a microtask continuation. async functions always return a promise.

Example. Serial vs parallel vs bounded concurrency:

for (const id of ids) out.push(await fetch(url(id)));        // N × latency
const out = await Promise.all(ids.map(id => fetch(url(id)))); // 1 × latency, N sockets

async function mapLimit(items, limit, fn) {                   // bounded
  const out = [], running = new Set();
  for (const [i, item] of items.entries()) {
    const p = Promise.resolve(fn(item, i)).then(r => { running.delete(p); return r; });
    out.push(p); running.add(p);
    if (running.size >= limit) await Promise.race(running);
  }
  return Promise.all(out);
}

Trade-offs. all fails fast (one rejection discards the rest); allSettled never rejects, right for dashboards and telemetry; any returns the first fulfilled and rejects with AggregateError; race returns the first settled and is the timeout idiom. Unbounded Promise.all over a large list floods the server and the browser's connection pool.

Follow-ups. How do you add a timeout to a fetch? How do you cancel in-flight work? What is an unhandled rejection and how do you report it?

More examples.

// 1 — timeout any promise, using race
const withTimeout = (p, ms) => Promise.race([
  p,
  new Promise((_, rej) => setTimeout(() => rej(new Error('timeout')), ms)),
]);

// 2 — retry with exponential backoff and jitter
async function retry(fn, tries = 3) {
  for (let i = 0; i < tries; i++) {
    try { return await fn(); }
    catch (e) {
      if (i === tries - 1) throw e;
      const wait = 2 ** i * 100 + Math.random() * 100;   // jitter avoids a thundering herd
      await new Promise(r => setTimeout(r, wait));
    }
  }
}

// 3 — genuinely sequential, when each step needs the previous result
const result = await steps.reduce(
  (acc, step) => acc.then(step),
  Promise.resolve(initial),
);

const results = [];
[1, 2, 3].forEach(async (n) => {
  results.push(await double(n));
});
console.log(results.length);

const results = await Promise.all([1, 2, 3].map(double));   // 3

2.6 this, call/apply/bind, arrow functions

What it is. this is resolved at call time by four rules in priority order: new → explicit call/apply/bind → method receiver → default (undefined in strict mode and modules, globalThis otherwise). Arrow functions have no this binding and close over the enclosing scope.

Example. const f = obj.method; f() loses the receiver; obj.method.bind(obj) or () => obj.method() keeps it.

Trade-offs. Class-field arrows bind per instance — convenient but they cost memory per instance and are not on the prototype, so they cannot be overridden or spied on easily.

Follow-ups. What is this in a standalone function in a module? In a setTimeout callback? In an event handler? Implement bind yourself.

More examples.

// 1 — the receiver is lost the moment you detach the method
const obj = { n: 1, get() { return this.n; } };
const f = obj.get;
obj.get(); // 1      — rule 3, receiver is obj
f();       // throws — rule 4, this is undefined in a module

// 2 — array callbacks take an explicit thisArg
[1, 2].map(function () { return this.k; }, { k: 9 }); // [9, 9]

// 3 — prototype method vs class field, and what each costs
class A {
  onClick() {}            // on A.prototype — one copy, needs binding
  onTap = () => {};       // per instance — pre-bound, costs memory per object
}

const o = {
  n: 10,
  regular() { return this.n; },
  arrow: () => this?.n,
  nested() { return [1].map(function () { return this?.n; })[0]; },
  nestedArrow() { return [1].map(() => this.n)[0]; },
};

2.7 Prototypes and classes

What it is. Every object has an internal prototype link (Object.getPrototypeOf(obj) === Ctor.prototype). Property lookup walks that chain. class is syntax over it: methods land on the prototype, class fields on the instance.

Example. Array.prototype.map is found by walking from the array instance to Array.prototype. obj.hasOwnProperty('x') checks only the own object; 'x' in obj walks the chain.

Trade-offs. Prototype sharing saves memory; prototype mutation at runtime deoptimises V8's hidden classes and should be avoided in hot paths. Monkey-patching built-in prototypes breaks other libraries.

Follow-ups. Difference between __proto__ and prototype? How does instanceof work? How would you implement inheritance without class?

More examples.

// 1 — instanceof is a walk, not a type tag
class A {} class B extends A {}
const b = new B();
b instanceof A;                              // true — A.prototype is on the chain
Object.getPrototypeOf(B.prototype) === A.prototype; // true

// 2 — own vs inherited
const o = Object.create({ inherited: 1 });
o.own = 2;
'inherited' in o;                  // true  — `in` walks the chain
o.hasOwnProperty('inherited');     // false — own properties only
Object.keys(o);                    // ['own'] — own and enumerable

// 3 — a null-prototype object has no inherited methods at all
const dict = Object.create(null);
dict.toString;                     // undefined — safe as a plain string map

const data = JSON.parse('{"hasOwnProperty": 1}');
data.hasOwnProperty('x');   // TypeError: not a function

Object.hasOwn(data, 'x');                          // modern, clearest
Object.prototype.hasOwnProperty.call(data, 'x');   // the classic borrow

2.8 Memory and garbage collection

What it is. V8 uses generational mark-and-sweep: a scavenged young space plus a mark-compact old space. Objects surviving two scavenges are promoted. Anything reachable from a root is retained.

Example. Leak taxonomy: detached DOM nodes, forgotten timers and listeners, unbounded module-level caches, closures over large objects. WeakMap/WeakSet keys do not retain; WeakRef + FinalizationRegistry for caches; AbortController for listener and fetch lifecycle.

Trade-offs. Weak collections prevent leaks but make eviction non-deterministic — you cannot rely on a finalizer running.

Follow-ups. How do you find a leak in DevTools? (Heap snapshot → interact → second snapshot → "objects allocated between 1 and 2" → sort by retained size → follow the retainer path.) What does a sawtooth memory graph that never returns to baseline mean?

More examples.

// 1 — a WeakMap lets the key be collected; a Map does not
const meta = new WeakMap();
meta.set(node, { seen: true });   // when `node` dies, the entry dies with it

// 2 — the three subscriptions that outlive a component
const id = setInterval(tick, 1000);          // must clearInterval
window.addEventListener('resize', onResize); // must removeEventListener
const sub = store.subscribe(onChange);       // must unsubscribe
// one controller can cover the listeners:
const ac = new AbortController();
window.addEventListener('resize', onResize, { signal: ac.signal });

// 3 — an unbounded module-level cache is a leak with good intentions
const cache = new Map();                    // grows forever
const bounded = new Map();                  // evict by size or time instead

2.9 The patterns asked by name

Follow-ups. Implement debounce with a leading edge and cancel(). Why does JSON.parse(JSON.stringify(x)) lose undefined, Date and cycles? When is stopImmediatePropagation needed over stopPropagation?

3. TypeScript

More examples.

// 1 — debounce with a cancel, the version worth memorising
function debounce(fn, ms) {
  let t;
  const wrapped = (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); };
  wrapped.cancel = () => clearTimeout(t);
  return wrapped;
}

// 2 — throttle: trailing edge preserved
function throttle(fn, ms) {
  let last = 0, timer;
  return (...a) => {
    const now = Date.now(), wait = ms - (now - last);
    if (wait <= 0) { last = now; fn(...a); }
    else { clearTimeout(timer); timer = setTimeout(() => { last = Date.now(); fn(...a); }, wait); }
  };
}

// 3 — event delegation: one listener for any number of rows
table.addEventListener('click', (e) => {
  const row = e.target.closest('[data-hotel-id]');
  if (row && table.contains(row)) select(row.dataset.hotelId);
});

3.1 Structural typing and branded types

What it is. TypeScript compares types by shape, not by name. Two unrelated types with the same members are interchangeable.

Example. To get nominal behaviour for identifiers:

type HotelId = string & { readonly __brand: 'HotelId' };
type CityId  = string & { readonly __brand: 'CityId' };
const asHotelId = (s: string) => s as HotelId;
// passing a CityId where a HotelId is expected is now a compile error

Trade-offs. Branding costs a cast at the boundary and slightly noisier types, and buys you a whole class of ID-mixup bugs caught at compile time.

Follow-ups. Why does TypeScript use structural typing? Where does structural typing surprise people? (Excess property checks apply to object literals only.)

3.2 any vs unknown vs never

What it is. any disables checking and propagates silently. unknown is the safe top type — assignable from anything, assignable to nothing without narrowing. never is the bottom type: no value inhabits it.

Example. never gives exhaustiveness for free:

function render(s: FetchState) {
  switch (s.status) {
    case 'loading': return spinner();
    case 'error':   return alert(s.error.message);
    case 'success': return list(s.data);
    default: { const _never: never = s; return _never; } // errors if a variant is added
  }
}

Trade-offs. Banning any outright creates friction at untyped third-party boundaries; the usual policy is unknown plus a parse, with any allowed only behind an explicit lint suppression and a comment.

Follow-ups. Why is unknown safer than any? What does never mean as a return type? How do you type a function that always throws?

3.3 Discriminated unions

What it is. A union of object types sharing a literal-typed discriminant field, which lets the compiler narrow by checking that field.

Example.

type FetchState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'error'; error: Error }
  | { status: 'success'; data: T };

Trade-offs. More verbose than { loading: boolean; error?: Error; data?: T }, but it makes impossible states unrepresentable — you can never have loading: true with data present.

Follow-ups. Model a booking flow's states. How does narrowing work with in, typeof and custom type guards (x is Foo)?

More examples.

// 1 — the discriminant does not have to be called "status"
type Shape =
  | { kind: 'circle'; r: number }
  | { kind: 'rect'; w: number; h: number };
const area = (s: Shape) => s.kind === 'circle' ? Math.PI * s.r ** 2 : s.w * s.h;

// 2 — a custom type guard narrows across function boundaries
function isError<T>(s: FetchState<T>): s is Extract<FetchState<T>, { status: 'error' }> {
  return s.status === 'error';
}

// 3 — a booking funnel where impossible states cannot be constructed
type Booking =
  | { step: 'dates' }
  | { step: 'rooms'; dates: DateRange }
  | { step: 'pay';   dates: DateRange; room: Room }
  | { step: 'done';  confirmation: string };
// you cannot reach 'pay' without a room — the type enforces the order

interface State<T> { loading: boolean; error?: Error; data?: T }

3.4 Generics, conditional and mapped types

What it is. Generics parameterise types; conditional types branch on assignability with infer; mapped types transform every key of a type, optionally remapping keys with as.

Example.

type Unwrap<T> = T extends Promise<infer U> ? Unwrap<U> : T;
type Getters<T> = { [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K] };
// Getters<{ name: string }> === { getName: () => string }

type PolymorphicProps<E extends React.ElementType> =
  { as?: E } & Omit<React.ComponentPropsWithoutRef<E>, 'as'>;

Trade-offs. Deep recursive conditional types are expressive but slow the compiler and produce unreadable errors. A platform rule of thumb: if the type needs a comment to explain it, prefer an explicit overload.

Follow-ups. Implement DeepPartial. What are Partial, Required, Pick, Omit, Record, ReturnType built from? Why do large unions blow up compile time?

3.5 Variance and where TypeScript is unsound

What it is. Function parameters are contravariant and returns covariant. TypeScript deliberately accepts some unsound patterns for ergonomics.

Example. Known unsound spots: arrays are covariant (Dog[] assignable to Animal[], then you can push a Cat); method parameters are bivariant unless strictFunctionTypes applies; index access without noUncheckedIndexedAccess claims T where T | undefined is true; as assertions bypass everything.

Trade-offs. Full soundness would reject large amounts of idiomatic JavaScript. Enabling noUncheckedIndexedAccess is correct but noisy on existing code.

Follow-ups. Where is TypeScript deliberately unsound, and why? What does strictFunctionTypes change?

3.6 Runtime validation at the boundary

What it is. Types are erased at compile time, so anything crossing a boundary — API responses, URL params, localStorage, postMessage, feature flags — must be parsed, not asserted.

Example.

const Hotel = z.object({ id: z.string(), price: z.number(), currency: z.string().length(3) });
type Hotel = z.infer<typeof Hotel>;          // one source of truth
const hotel = Hotel.parse(await res.json()); // throws on drift, at the edge

Trade-offs. Zod adds bundle weight (Valibot is lighter, ArkType faster) and runtime cost per parse. Validate at boundaries only, not on every internal call.

Follow-ups. Where exactly do you validate? How do you keep frontend types in sync with the backend? (Generate from OpenAPI/GraphQL/protobuf in CI so a breaking change fails the build.)

More examples.

// 1 — one schema, one type, parsed once at the edge
const Hotel = z.object({ id: z.string(), price: z.number() });
type Hotel = z.infer<typeof Hotel>;
const hotel = Hotel.parse(await res.json());

// 2 — safeParse when a bad payload should degrade, not crash
const r = Hotel.safeParse(raw);
if (!r.success) { report(r.error); return fallback; }

// 3 — the boundaries people forget
const flags  = Flags.parse(JSON.parse(localStorage.getItem('flags') ?? '{}'));
const params = Search.parse(Object.fromEntries(new URLSearchParams(location.search)));
window.addEventListener('message', (e) => Msg.parse(e.data));  // postMessage is a boundary too

3.7 Declaration merging and module augmentation

What it is. Interfaces with the same name in the same scope merge; declare module extends a third-party library's types.

Example.

declare module 'styled-components' {
  export interface DefaultTheme extends AppTheme {}
}

Trade-offs. Powerful for design-system theming, but global augmentation is invisible action-at-a-distance and can conflict between packages.

Follow-ups. How do you type a library that ships no types? What goes in exports conditions (import, require, types, browser) when publishing a package?

3.8 TypeScript at monorepo scale

Strictness ratchet. You cannot flip strict: true on a legacy codebase in one PR. Enable one flag at a time (noImplicitAny, then strictNullChecks), write existing failures to a baseline file, fail CI only on new violations, and burn the baseline down.

Follow-ups. How would you migrate a 500k-line JS codebase to TypeScript? What do you do about the long tail of @ts-expect-error?

4. Browser internals

4.1 The critical rendering path

What it is. The sequence from bytes to pixels: network → HTML parse to DOM → CSS parse to CSSOM → render tree → layout → paint → composite.

Example. Script loading changes the path: a classic <script> blocks the parser; defer runs after parsing, before DOMContentLoaded, in document order; async runs whenever it arrives, out of order. CSS is render-blocking by default — the browser will not paint without the CSSOM.

Trade-offs. Inlining critical CSS removes a round trip but bloats the HTML and loses caching. Inlining a script can hurt, because the preload scanner can no longer discover and fetch subresources ahead of the blocked parser.

Follow-ups. What blocks first paint? Where should <script> go and why? What is the preload scanner? What's the difference between DOMContentLoaded and load?

4.2 Layout, paint, composite — what each change costs

What it is. A style change re-enters the pipeline at a stage determined by the property changed.

Example. Animate transform: translateX() rather than left, and opacity rather than visibility. Promote with will-change: transform immediately before the animation and remove it after.

Trade-offs. Each promoted layer costs GPU memory; leaving will-change on many elements causes layer explosion and can make things slower than not promoting at all.

Follow-ups. Which properties are cheap to animate and why? What does promoting a layer actually do? How would you debug a janky animation in DevTools? (Rendering panel → paint flashing, layer borders, FPS meter.)

More examples.

/* 1 — same visual motion, three very different costs */
.a { left: 100px; }                  /* layout → paint → composite */
.b { background-color: red; }        /* paint → composite */
.c { transform: translateX(100px); } /* composite only */

/* 2 — promote only for the duration of the animation, then release */
.card.animating { will-change: transform; }

/* 3 — stop a widget's reflows escaping into the host page */
.widget { contain: layout paint; content-visibility: auto;
          contain-intrinsic-size: 0 420px; }

4.3 Reflow and layout thrashing

What it is. Reading a geometry property while style is dirty forces a synchronous layout. Interleaving reads and writes in a loop produces O(n) forced reflows.

Example.

// BAD — read/write/read/write, n forced synchronous layouts
boxes.forEach(b => { b.style.width = b.offsetWidth + 10 + 'px'; });

// GOOD — batch reads, then batch writes
const widths = boxes.map(b => b.offsetWidth);
boxes.forEach((b, i) => { b.style.width = widths[i] + 10 + 'px'; });

Forcing properties: offsetTop/Left/Width/Height, scrollTop/Height, clientWidth/Height, getComputedStyle(), getBoundingClientRect(), focus(), scrollIntoView().

Trade-offs. A read/write scheduler (FastDOM-style) fixes it generically but adds a frame of latency and indirection. ResizeObserver/IntersectionObserver deliver measurements off the critical path and are usually the better answer.

Follow-ups. Why is getBoundingClientRect() expensive? How does DevTools surface a forced reflow? Where would you put the fix — the component or the framework?

4.4 Main thread vs compositor thread

What it is. The main thread runs JavaScript, style, layout and paint. The compositor thread assembles layers, often on the GPU, and can scroll and animate independently.

Example. Escape hatches from the main thread:

Trade-offs. Workers buy parallelism at the cost of serialisation and a more complex API (Comlink helps). content-visibility can break find-in-page and anchor scrolling if contain-intrinsic-size is wrong.

Follow-ups. What is a long task and why does 50ms matter? What can't a worker do? How do you move a 300ms JSON parse off the main thread?

4.5 Observers and platform APIs

Trade-offs. Observers are asynchronous and batched — better for performance, but you cannot read a value synchronously right after a change.

Follow-ups. Implement infinite scroll without a scroll listener. How does AbortController clean up both a fetch and its listeners? What are the rootMargin and threshold options for?

More examples.

// 1 — infinite scroll with no scroll listener at all
const io = new IntersectionObserver(([e]) => e.isIntersecting && loadMore(),
                                    { rootMargin: '400px' });   // prefetch before it is visible
io.observe(sentinel);

// 2 — impression tracking: fire once, when half the card has been seen
new IntersectionObserver((es) => es.forEach((e) => {
  if (e.isIntersecting) { track(e.target.dataset.id); io2.unobserve(e.target); }
}), { threshold: 0.5 });

// 3 — one controller cancels a fetch and its listeners together
const ac = new AbortController();
fetch(url, { signal: ac.signal });
el.addEventListener('click', onClick, { signal: ac.signal });
ac.abort();   // both gone

4.6 The browser as a security boundary

What it is. Site isolation puts each site in its own renderer process, so a compromised renderer cannot read another site's memory.

Example. This is why SharedArrayBuffer requires COOP and COEP headers, and why window.opener access from target="_blank" links is restricted (rel="noopener").

Trade-offs. Process-per-site costs memory — a visible issue on low-end devices, which matters for emerging-market traffic.

Follow-ups. Why do Spectre mitigations require COOP/COEP? What is the same-origin policy and what does "origin" mean exactly? (scheme + host + port.)

5. Rendering architectures and React

5.1 CSR, SSR, SSG, ISR, streaming, islands, edge

What it is. Where the HTML comes from, and when.

Example. A hotel search page is best segmented by volatility: static marketing pages SSG; hotel detail ISR; search shell streamed from the edge; prices client-fetched because they must never be cached.

Trade-offs. One global strategy is almost always wrong for a marketplace. SSR improves LCP and SEO but shifts cost to servers and adds hydration cost; SSG is fastest but cannot personalise.

Follow-ups. How would you render a hotel search page and why? What breaks if you cache an SSR page at the CDN? When is CSR the right answer?

5.2 Hydration

What it is. The client re-runs the component tree over server-rendered HTML to attach event listeners and rebuild state.

Example. The ladder of fixes, cheapest first:

1. Ship less — server-render static parts and don't hydrate them.
2. Selective/progressive hydration — hydrate above-the-fold and interactive islands first, the rest on IntersectionObserver or on interaction.
3. Streaming + Suspense boundaries, so hydration happens in chunks rather than one long task.
4. Resumability (Qwik) — serialise listener state into HTML, no hydration pass at all.
5. Server Components — whole subtrees never reach the client.

Trade-offs. Hydration is why a server-rendered page can look ready and not respond — the "uncanny valley" that wrecks INP. Avoiding it entirely usually means framework lock-in.

Follow-ups. What causes a hydration mismatch? (Date.now(), locale formatting, window access during render, random ids, UA-dependent markup.) How do you fix a genuinely client-only value? What does React do when markup doesn't match?

More examples.

// 1 — the mismatch nobody expects: locale and clock differ server vs client
<span>{new Date().toLocaleDateString()}</span>

// 2 — the two-pass escape hatch for genuinely client-only values
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
return <span>{mounted ? localTime() : null}</span>;

// 3 — hydrate a heavy island only once it is visible
const Map = lazy(() => import('./Map'));
<Suspense fallback={<MapSkeleton />}>{visible && <Map />}</Suspense>

5.3 Fiber and reconciliation

What it is. A fiber is a plain object describing a unit of work with child, sibling and return pointers. React keeps two trees — current and work-in-progress. The render phase is interruptible; the commit phase is one synchronous pass.

Example. Diffing heuristics: different element type → unmount the whole subtree; same type → update props in place; list children matched by key. So index-as-key breaks on reorder — a sorted list of checkboxes keeps the wrong checked state because state attaches to position, not identity.

Trade-offs. O(n) heuristic diffing instead of an optimal O(n³) tree diff: fast, but it relies on you giving stable keys and not changing component types.

Follow-ups. Why must render be pure? Why does StrictMode double-invoke in dev? What happens in commit vs render? When is useLayoutEffect correct over useEffect?

More examples.

// 1 — index keys attach state to a slot, not to an item
{items.map((it, i) => <Row key={i} />)}     // sort → checkbox state stays behind
{items.map((it)    => <Row key={it.id} />)} // sort → state travels with the row

// 2 — changing the element type unmounts the whole subtree
{editing ? <input value={v} /> : <Input value={v} />}   // remounts, focus lost

// 3 — a key change is the deliberate way to reset state
<Form key={userId} />   // switching user clears every field inside

5.4 Hooks

What it is. Hooks are a linked list on the fiber, resolved by call order — which is why they cannot be called conditionally.

Trade-offs. Most useEffects that derive state should be plain computation during render; effects that sync to external systems are the legitimate use.

Follow-ups. Why can't hooks be conditional? When does useEffect run relative to paint? Write a useDebounce. What is a stale closure and how do you avoid it?

5.5 Concurrent rendering

What it is. React 18+ assigns lanes/priorities: discrete input is urgent, transitions are not. Automatic batching now covers promises and timeouts, not just event handlers.

Example. startTransition(() => setFilters(next)) keeps the input responsive while a large result list re-filters.

Trade-offs. A component can render without committing, so side effects in render became actively dangerous; and tearing becomes possible with external mutable stores, which is why useSyncExternalStore exists.

Follow-ups. What is tearing? What's the difference between useTransition and useDeferredValue? What does Suspense actually suspend on?

More examples.

// 1 — keep typing responsive while a large list re-filters
const [q, setQ] = useState('');
const deferred = useDeferredValue(q);         // list renders from the stale value
const rows = useMemo(() => filter(all, deferred), [all, deferred]);

// 2 — mark a navigation as interruptible and show pending state
const [isPending, startTransition] = useTransition();
startTransition(() => setRoute(next));

// 3 — an external store that cannot tear under concurrent rendering
const width = useSyncExternalStore(
  (cb) => { window.addEventListener('resize', cb); return () => window.removeEventListener('resize', cb); },
  () => window.innerWidth,
  () => 1024,            // server snapshot
);

5.6 Server Components

What it is. Components that run only on the server, never ship their code to the client, can read data directly, and serialise their output into an RSC payload (a stream, not HTML). Client Components are marked 'use client' and form the boundary.

Example. A hotel detail page can fetch and render description, amenities and policies as RSC, with only the date picker and booking widget as Client Components.

Trade-offs. Smaller client bundles and no client-side data waterfall, versus a new mental model, a server runtime requirement, harder incremental adoption, and payload size for deeply nested trees.

Follow-ups. What can't a Server Component do? How do props cross the boundary? (They must be serialisable.) How does this differ from SSR?

5.7 State management

Trade-offs. Keep server cache separate from client state; pick the narrowest tool; give teams one blessed default so twelve squads don't ship twelve patterns.

Follow-ups. Why is Context not a state manager? Where does search-filter state belong and why? How do you prevent a context change re-rendering the whole tree?

5.8 React vs signals

What it is. React re-renders subtrees and diffs a virtual DOM. Vue 3, Svelte 5 and Solid use fine-grained reactivity (signals) that updates only the bound DOM nodes.

Example. In Solid, a component function runs once; the signal read inside a JSX expression creates a direct subscription to that text node.

Trade-offs. Signals do less work at runtime but need a compiler or proxy layer and have a smaller ecosystem. React Compiler attacks the same problem from the other direction by auto-memoising. Web Components remain the interop layer when you must ship a widget into partner sites you don't control.

Follow-ups. When would you not choose React? What does React Compiler change about how you write components? Why is the virtual DOM not inherently fast?

6. Web protocols

6.1 What happens when you type a URL

What it is. URL parse → HSTS check → DNS resolution → TCP handshake (or QUIC's single round trip) → TLS handshake, ALPN negotiating h2/h3 → HTTP request → CDN or origin response → parse and render.

Example. Counting round trips is the point: a cold cross-origin image host costs DNS + TCP + TLS before the first byte, which is exactly what preconnect removes.

Trade-offs. Every extra origin costs a connection setup; that's why domain sharding stopped being an optimisation and became a cost.

Follow-ups. Where does the browser cache fit in this sequence? What does HSTS preload change? Why does preconnect help more on mobile?

6.2 DNS

What it is. Hierarchical name resolution: browser cache → OS cache → resolver → root → TLD → authoritative, each hop honouring a TTL.

Example. dns-prefetch resolves a third-party hostname early; preconnect goes further and completes TCP + TLS too.

Trade-offs. A low TTL buys fast failover and costs more lookups. A CNAME chain to your CDN adds a lookup on cold connections.

Follow-ups. What's the difference between dns-prefetch and preconnect? How many preconnect hints should a page have? (A handful — they compete for bandwidth.)

6.3 TCP vs QUIC

What it is. TCP is a reliable, ordered, connection-oriented byte stream with a three-way handshake. QUIC runs over UDP, builds in TLS 1.3, and multiplexes independent streams.

Example. On a lossy mobile network, one lost TCP segment stalls every HTTP/2 stream on that connection; with QUIC only the affected stream stalls.

Trade-offs. QUIC moves congestion control into userspace (more CPU, faster iteration) and some corporate networks block or throttle UDP.

Follow-ups. What is head-of-line blocking, at which layer? Why does connection migration matter when a phone switches from Wi-Fi to cellular?

6.4 TLS

What it is. The handshake negotiates cipher and protocol version, ALPN selects h2/h3, the server presents a certificate chain validated against a trust store, and session keys are derived.

Example. TLS 1.3 completes in one round trip; session resumption and 0-RTT reduce it further.

Trade-offs. 0-RTT data is replayable, so it must only carry idempotent requests. Certificate pinning improves security but causes outages when rotation is mishandled.

Follow-ups. What does Strict-Transport-Security do and why does preload matter? What breaks with mixed content? What is ALPN for?

6.5 HTTP versions

Example. Under HTTP/1.1, sprite sheets, concatenated bundles and domain sharding were correct. Under HTTP/2 sharding is an anti-pattern and many small cacheable chunks are fine.

Trade-offs. H2 Server Push is dead (removed from Chrome) — the replacement is 103 Early Hints plus preload.

Follow-ups. Does HTTP/2 remove the need for bundling? (No — compression ratio and request overhead still favour reasonable chunk sizes.) Why did Server Push fail?

6.6 HTTP methods and idempotency

What it is. Safe means no state change; idempotent means repeating has the same end effect as doing it once.

Example. A booking POST carries a client-generated Idempotency-Key; the server stores key → response for a window, so a retry after a timeout returns the original result instead of double-booking.

Trade-offs. Idempotency is an API contract, not a client property. Retries without a circuit breaker and jittered backoff turn a blip into a retry storm.

Follow-ups. How do you make a POST retry-safe? Where do you put retry policy — the component, the data layer, or the gateway? What does Retry-After do?

More examples.

# 1 — the same booking submitted twice, deduplicated by the server
POST /bookings
Idempotency-Key: 6f3a1c2e-9b7d-4e11-ae02-1d9c4f8b2a77
# a retry with the same key returns the original response, no second booking

# 2 — honour the server's own backoff instruction
HTTP/1.1 429 Too Many Requests
Retry-After: 30

// 3 — retry reads freely, mutations only with a key
const retryable = (method, hasKey) =>
  ['GET', 'HEAD', 'PUT', 'DELETE'].includes(method) || hasKey;

6.7 Realtime transports

Example. Subscribe per visible item rather than per result set — drive subscriptions from IntersectionObserver so offscreen cards unsubscribe; coalesce bursts into one flush per animation frame.

Trade-offs. WebSockets are stateful, which complicates load balancing, scaling and deploys; SSE rides normal HTTP infrastructure but is one-way and limited to text.

Follow-ups. How do you reconnect without hammering the server? (Exponential backoff with jitter, a sequence number to detect gaps, full refetch after a gap.) How do you scale a WebSocket fleet? How do you handle backpressure?

6.8 API shapes: REST, GraphQL, BFF

What it is. REST exposes resources; GraphQL exposes one endpoint with a client-specified query; a BFF is a server owned by the frontend team that aggregates and trims payloads for one surface.

Example. For a travel marketplace, a BFF per surface (web, iOS, Android) keeps the mobile payload small without forcing every backend service to change.

Trade-offs. GraphQL removes over-fetching and client-side waterfalls, and costs you CDN cacheability (POST by default), N+1 risk on the server, and the need for query-cost limits and persisted queries. REST stays trivially cacheable.

Follow-ups. How do you cache a GraphQL response at the edge? Cursor vs offset pagination, and why does offset break on a live inventory? How do you version an API the frontend depends on?

7. Caching, storage and offline

7.1 HTTP cache headers

What it is. Cache-Control sets the policy; ETag/Last-Modified enable conditional revalidation; Vary defines the cache key's extra dimensions.

Example.

GET /app.3f9a1c.js  →  Cache-Control: public, max-age=31536000, immutable
GET /                →  Cache-Control: no-cache
                        ETag: "v842"
   next request:        If-None-Match: "v842"  →  304 Not Modified

Trade-offs. private vs public is a correctness decision, not a performance one — getting it wrong serves one user's booking page to another. Over-varying (e.g. on User-Agent) destroys hit rate.

Follow-ups. What's the difference between no-cache and no-store? What exactly does a 304 save? Strong vs weak ETags? Why must Vary: Accept-Encoding be set?

More examples.

# 1 — hashed asset: cache hard, forever, never revalidate
GET /app.3f9a1c.js
Cache-Control: public, max-age=31536000, immutable

# 2 — the document: always revalidate, cheap when unchanged
GET /
Cache-Control: no-cache
ETag: "v842"
→ If-None-Match: "v842" → 304 Not Modified   (headers only, no body)

# 3 — short browser TTL, long edge TTL, instant-but-fresh
Cache-Control: max-age=0, s-maxage=600, stale-while-revalidate=3600

# 4 — correctness with compression and locales
Vary: Accept-Encoding, Accept-Language

7.2 The cache-busting pattern

What it is. Immutable, long-lived, content-hashed assets plus a short-lived or revalidated HTML document that points at them.

Example. index.html is no-cache; it references app.3f9a1c.js which is immutable. A deploy changes the hash, so no purge is needed and no user ever gets a mismatched chunk.

Trade-offs. You still must handle a chunk 404 for users who loaded old HTML before a deploy — catch ChunkLoadError, retry with a cache-bust, then force a reload.

Follow-ups. What happens to a user who's been sitting on a tab for an hour when you deploy? How do you roll back without breaking in-flight sessions? (Keep the previous N builds' assets on the CDN.)

7.3 CDN and the cache layer stack

What it is. A response passes through: browser memory cache → browser disk cache → Service Worker cache → preload cache → CDN edge → CDN shield/regional → origin.

Example. A shield tier collapses many edge misses into one origin request, which protects the origin during a cache purge or a traffic spike.

Trade-offs. Caching personalised HTML at the edge requires the personalisation to be in the cache key, which fragments the cache. The usual resolution is to cache an anonymous shell and personalise client-side or via an edge function.

Follow-ups. What should never be cached at the CDN? How do you invalidate — purge by URL, surrogate key, or just change the hash? What does a cache HIT/MISS/STALE header tell you when debugging?

7.4 Browser storage

Example. Reading localStorage inside a scroll handler is a genuine performance bug — it is synchronous disk I/O on the main thread.

Trade-offs. Cookies travel on every request, adding bytes to every call; localStorage is convenient but XSS-readable and synchronous; IndexedDB is the only option at size but has an awkward API (use idb).

Follow-ups. Where would you store an auth token and why? What is storage quota and what happens when it's exceeded? How do you sync state between tabs? (BroadcastChannel or a storage event.)

7.5 Cookie attributes

What it is. HttpOnly blocks JavaScript access; Secure restricts to HTTPS; SameSite controls cross-site sending; Domain/Path set scope; Max-Age/Expires set lifetime.

Example. Set-Cookie: sid=...; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=1209600

Trade-offs. SameSite=Strict is the safest and breaks inbound links from email and partner sites (the user arrives logged out). Lax is the modern default and allows top-level GET navigation. None requires Secure and is needed for genuine third-party contexts.

Follow-ups. Why does SameSite=Lax mostly solve CSRF? What is a cookie-prefix (__Host-)? How do cookies behave across subdomains, and what breaks when several apps share an apex domain?

7.6 Service Workers and offline

What it is. A proxy worker sitting between the page and the network, with its own cache, lifecycle and no DOM access.

Example. Lifecycle is install → waiting → activate; skipWaiting and clients.claim take over immediately. Strategy by resource type:

Trade-offs. A Service Worker is the most dangerous thing a frontend team deploys — a bad one is sticky and can serve broken assets indefinitely. Always ship a kill switch (remote flag that makes it unregister) and know Clear-Site-Data. skipWaiting risks mixing an old page with a new worker.

Follow-ups. How do you update a Service Worker safely? What is Background Sync for? How would you make a booking flow survive a tunnel? (Draft in IndexedDB, queued submit with an idempotency key, explicit offline UI — never an optimistic success.)

8. Security

8.1 Same-origin policy and CORS

What it is. An origin is scheme + host + port. The same-origin policy blocks a document from reading cross-origin responses. CORS is the server's mechanism to relax that — it is not a defence.

Example. A non-simple request triggers a preflight:

OPTIONS /api/book          Origin: https://www.example.com
                           Access-Control-Request-Method: POST
                           Access-Control-Request-Headers: content-type, authorization
→ Access-Control-Allow-Origin: https://www.example.com
  Access-Control-Allow-Credentials: true
  Access-Control-Max-Age: 600

Trade-offs. Allow-Credentials: true cannot be combined with Origin: * — you must echo a specific, validated origin. Blindly reflecting Origin is a common vulnerability. A high Max-Age cuts preflights but delays policy changes.

Follow-ups. What makes a request "simple" (no preflight)? Does CORS protect your API? (No — curl ignores it; authorization is the server's job.) Why can a <img> or <form> go cross-origin but fetch cannot read the response?

8.2 XSS

What it is. Executing attacker-controlled script in your origin.

Example. React escapes interpolated values, so the real React vectors are exactly four: dangerouslySetInnerHTML, href={userInput} with a javascript: URL, spreading unvalidated props onto an element, and server-rendered JSON injection (an unescaped </script> inside a serialised payload).

Trade-offs. Sanitising HTML is a losing arms race compared with not rendering HTML at all; Trusted Types converts a code-review problem into a browser-enforced one, at the cost of a migration.

Follow-ups. How would you safely render user-authored rich text? Why is encodeURIComponent not enough in an HTML attribute? What does Trusted Types enforce?

More examples.

// 1 — the four real React vectors
<div dangerouslySetInnerHTML={{ __html: userHtml }} />   // sink
<a href={userUrl}>link</a>                               // javascript: URL
<Component {...untrustedProps} />                        // can inject onError etc.
<script>{`window.__DATA__ = ${JSON.stringify(data)}`}</script>  // </script> breakout

// 2 — safe versions
<a href={/^https?:\/\//.test(userUrl) ? userUrl : '#'}>link</a>
const safe = JSON.stringify(data).replace(/</g, '\\u003c');   // escape the breakout

// 3 — when you genuinely must render HTML
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userHtml) }} />

8.3 Content Security Policy

What it is. A response header restricting which sources of script, style, images and frames may load and execute.

Example. A strict modern policy uses nonces plus strict-dynamic, not a host allowlist:

Content-Security-Policy:
  script-src 'nonce-{random}' 'strict-dynamic' https: 'unsafe-inline';
  object-src 'none'; base-uri 'none'; require-trusted-types-for 'script';
  report-uri /csp-report

'unsafe-inline' and https: here are fallbacks for old browsers that modern browsers ignore once a nonce is present.

Trade-offs. Host allowlists are routinely bypassable via JSONP endpoints on allowed CDNs. Nonces are incompatible with full-page CDN caching (each response needs a fresh nonce) — which pushes you to hashes or edge-injected nonces. Inline styles from runtime CSS-in-JS and tag managers are the usual blockers.

Follow-ups. How do you roll out CSP without breaking the site? (Content-Security-Policy-Report-Only, collect violations for two weeks, then enforce.) Why is strict-dynamic better than an allowlist? How does CSP interact with a CDN?

8.4 CSRF

What it is. An attacker-controlled page causes the victim's browser to make an authenticated write using cookies it sends automatically.

Example. Defences, in order of preference: SameSite=Lax/Strict cookies, a synchroniser or double-submit token, and checking Origin/Sec-Fetch-Site server-side.

Trade-offs. CSRF defences are only needed when you authenticate with cookies — a bearer token in an Authorization header is not sent automatically, so it is not CSRF-exposed (but is XSS-exposed instead).

Follow-ups. CORS vs CSRF in one sentence each. Does SameSite=Lax fully solve CSRF? (Not for top-level GET state changes — another reason GET must stay safe.)

8.5 Security headers

Follow-ups. Which of these would you set first on a new service, and why? What breaks when you turn on COEP?

8.6 Authentication vs authorization

What it is. Authentication is "who are you"; authorization is "what may you do."

Example. Hiding an admin button is a UX affordance. The server must independently enforce the permission on the endpoint.

Trade-offs. Fetching a capabilities object lets the UI render correctly without duplicating policy, at the cost of an extra round trip and a cache-invalidation question when roles change.

Follow-ups. Where must authorization be enforced? How do you handle a user whose permissions change mid-session?

8.7 OAuth, OIDC and JWT

What it is. OAuth 2.0 is a delegated authorization framework; OpenID Connect is the authentication layer on top of it (the id_token); JWT is merely a token format. An OAuth implementation need not use JWTs.

Example. For a browser app, use Authorization Code with PKCE. The implicit flow is deprecated because it leaked tokens into URL fragments, history and referrers. Validate state (CSRF on the callback) and nonce (id_token replay).

A JWT is header.payload.signature, base64url — encoded, not encrypted. Server-side validation must check the signature, pin the expected alg (reject none and algorithm confusion), and check iss, aud, exp, nbf.

Trade-offs. Stateless JWTs scale well but cannot be revoked before expiry — so either keep access-token lifetimes very short or maintain a denylist and give up some statelessness. Opaque tokens with introspection are the opposite trade.

Follow-ups. Access vs refresh tokens? How does rotation with reuse detection work? (Each refresh issues a new token and invalidates the old; if an old one reappears, revoke the whole family.) What stops ten parallel 401s triggering ten refreshes? (A single-flight lock.)

8.8 Token storage

What it is. The choice between localStorage, cookies and memory for auth material.

Example. The defensible architecture: short-lived access token in memory only, refresh token in an HttpOnly; Secure; SameSite=Strict cookie scoped to the refresh path, silent refresh on 401.

Trade-offs. localStorage is XSS-readable; cookies are CSRF-exposed but can be HttpOnly. The honest caveat: under XSS you lose either way, because the attacker can simply call your API from the victim's session. That is why CSP and Trusted Types matter more than storage choice.

Follow-ups. Why is "just use HttpOnly cookies" not a complete answer? What survives a page refresh with in-memory tokens? (Nothing — you silently refresh on load.)

More examples.

// 1 — access token in memory only, never persisted
let accessToken = null;                  // dies on refresh, by design

// 2 — refresh via an HttpOnly cookie, single-flight so N 401s cause one refresh
let inflight = null;
const refresh = () => (inflight ??= fetch('/auth/refresh', { credentials: 'include' })
  .then(r => r.json())
  .finally(() => { inflight = null; }));

// 3 — the cookie that carries it
// Set-Cookie: rt=…; HttpOnly; Secure; SameSite=Strict; Path=/auth/refresh; Max-Age=1209600

8.9 Supply chain and third parties

What it is. Risk arriving through dependencies and third-party scripts rather than your own code.

Example. Controls: committed lockfile, npm ci only, Renovate/Dependabot with grouped patch automerge, npm audit/Socket in CI, ignore-scripts plus a private registry proxy, and provenance/sigstore where available. For third-party tags: Subresource Integrity hashes, crossorigin, sandboxed iframes, and a review gate.

Trade-offs. SRI breaks when the vendor updates the file — which is the point, but it means vendor-hosted "always latest" scripts cannot use it. Sandboxing a tag often breaks the feature the business wanted.

Follow-ups. What is dependency confusion and how do scoped private packages prevent it? A marketing tag on your checkout page — what's the blast radius? (Full compromise.) How would you audit what third-party scripts are actually on the page?

8.10 Privacy and compliance on the frontend

What it is. Consent, data minimisation and scope reduction as frontend responsibilities.

Example. Consent management must gate analytics before it loads; PII never goes in URLs (they land in logs and Referer); session-replay tools need field masking; and a payment iframe or hosted fields keeps card data out of your DOM, which removes you from most PCI scope.

Trade-offs. Hosted payment fields reduce compliance scope and cost you styling control and a slightly worse checkout UX.

Follow-ups. How do you keep analytics working under a strict CSP? What would you mask in session replay on a booking form?

9. Performance

9.1 Core Web Vitals

What it is. Three field metrics, measured at the 75th percentile of real users.

Example. Supporting diagnostics: TTFB (server + network), FCP (first paint of anything), TBT (sum of long-task time over 50ms), TTI. TBT is the lab proxy; INP is the field metric.

Trade-offs. p75 hides the tail — always look at p95 too, and segment by device class and country, because a global average flatters you while low-end Android users suffer.

Follow-ups. Why did INP replace FID? What's the difference between lab and field data? How do you attribute an INP regression to a specific interaction? (event timing entries and the Long Animation Frames API.)

More examples.

// 1 — attribute a regression to a deploy, not just a route
onLCP(m => beacon({ v: m.value, build: __BUILD_ID__, route, device, country }));

// 2 — find WHICH element is the LCP, in the field
new PerformanceObserver((l) => {
  const e = l.getEntries().at(-1);
  beacon({ lcp: e.startTime, el: e.element?.tagName, url: e.url });
}).observe({ type: 'largest-contentful-paint', buffered: true });

// 3 — attribute INP to the actual interaction
new PerformanceObserver((l) => l.getEntries()
  .filter(e => e.duration > 200)
  .forEach(e => beacon({ inp: e.duration, type: e.name, target: e.target?.id })),
).observe({ type: 'event', durationThreshold: 200, buffered: true });

9.2 Measurement

What it is. Lab tools give deterministic, repeatable numbers; field tools (RUM) give the truth about real users.

Example.

import { onLCP, onINP, onCLS } from 'web-vitals';
const send = m => navigator.sendBeacon('/rum', JSON.stringify({
  name: m.name, value: m.value, id: m.id,
  route: currentRoute(), buildId: __BUILD_ID__,   // attribute regressions to a deploy
  conn: navigator.connection?.effectiveType,
}));
onLCP(send); onINP(send); onCLS(send);

Trade-offs. Lighthouse CI is good for gating because it is deterministic, and blind to real device and network diversity. RUM is true but noisy and needs volume before a signal appears — hence synthetic monitoring as the early-warning layer.

Follow-ups. How do you read a Performance panel trace? (Long tasks, forced reflow warnings, the main-thread flame chart, Recalculate Style and Layout blocks.) What is CrUX? Why beacon on visibilitychange rather than unload?

9.3 Loading optimisation

What it is. Shortening the critical path from request to largest paint.

Example. In rough order of payoff:

1. Critical CSS inline, rest deferred; per-route CSS extraction.
2. Resource hints: preconnect to the image/API origin, preload the LCP image and the critical font, fetchpriority="high" on the hero and low below the fold, prefetch the next likely route.
3. Images: AVIF with WebP fallback, responsive srcset/sizes, explicit width/height or aspect-ratio, loading="lazy" only below the fold, decoding="async", CDN resizing on the fly.
4. Fonts: font-display: swap (or optional), preload one critical woff2, subset glyph ranges, size-adjust metric overrides so the swap doesn't shift layout.
5. JavaScript: route-level splitting, then component-level for heavy widgets, then shrink what remains.
6. Third parties: facade pattern (a fake chat button that loads the real widget on click), iframe sandboxing, or Partytown.

Trade-offs. Preload competes with itself — more than about three hints and you delay the thing you cared about. loading="lazy" on the LCP image is a classic self-inflicted regression.

Follow-ups. What's the difference between preload, prefetch and preconnect? Why can inlining a script hurt? How would you optimise a hotel listing page with forty images?

9.4 Compression

What it is. Brotli (br) beats gzip by roughly 15–20% on text assets; gzip is the universal fallback. Negotiated via Accept-Encoding, which makes Vary: Accept-Encoding mandatory.

Example. Pre-compress static assets at build time with Brotli quality 11 and serve the .br file; use quality 4–6 for dynamic responses so you don't trade TTFB for bytes.

Trade-offs. Never re-compress already-compressed payloads (JPEG, AVIF, WebP, woff2, video) — you burn CPU and can grow the file. Compressing a response containing a secret alongside reflected user input is the BREACH class.

Follow-ups. Why state bundle budgets in compressed bytes? How does compression interact with CDN caching? Why not Brotli images?

9.5 Runtime performance

What it is. Keeping interactions under the INP threshold once the page is loaded.

Example. The standard levers: virtualise long lists (react-window, TanStack Virtual); useDeferredValue/startTransition for filtering while typing; debounce input and throttle scroll; move big JSON parses to a worker; animate on the compositor via CSS or the Web Animations API; memoise deliberately rather than everywhere.

Trade-offs. Memoisation has its own cost (comparison plus retained references) and useMemo everywhere makes code harder to change for no measured gain — prefer state colocation and context splitting first. React Compiler changes this calculus.

Follow-ups. A 10,000-row price calendar is janky — what do you do? Why doesn't React.memo help when you pass an inline object or arrow? What is a long task and how do you break one up?

9.6 Budgets and enforcement

What it is. A per-route limit on transferred bytes and lab metrics, enforced in CI.

Example. Search route: 170KB gzip JS, 50KB CSS, LCP image ≤ 150KB, Lighthouse LCP ≤ 2.5s. Enforce with size-limit or bundlesize; fail the PR and post the delta plus a treemap link as a bot comment.

Trade-offs. Hard budgets block legitimate features; the usual resolution is a documented exception process with an owner and an expiry, not a silently raised threshold.

Follow-ups. Where do you set the budget — total repo or per route? Who owns a budget breach? How do you stop budgets drifting upward over a year?

9.7 A performance debugging workflow

What it is. A repeatable sequence from symptom to systemic fix.

Example.

1. Quantify in RUM: which metric, which p, which segment, since when.
2. Correlate with build ids and releases to find a candidate cause.
3. Reproduce in the lab with matching throttling and device class.
4. Trace in the Performance panel; find the long task or the blocking resource.
5. Attribute to a module — bundle analyser treemap, or the LoAF script attribution.
6. Fix, then verify in the lab, then confirm in RUM at p75 and p95.
7. Guardrail: a budget, a lint rule, or a CI check so the class of regression cannot return.

Trade-offs. Steps 1–2 are often skipped in favour of jumping to the lab — which finds a problem, rarely the problem.

Follow-ups. Walk me through a real regression you diagnosed. How did you know the fix worked? What stops it recurring?

10. Bundling and build systems

10.1 Module formats

What it is. CommonJS uses dynamic, synchronous require resolved at runtime. ESM uses static import/export, hoisted, with live bindings, resolved before execution.

Example. That static structure is what makes tree shaking, top-level await and import maps possible. CJS cannot be reliably tree-shaken because require('./x')[name] is only knowable at runtime.

Trade-offs. Interop is the pain: "type": "module", dual exports maps, no __dirname in ESM, and packages that ship both. A platform team's job is to publish correct exports conditions (import, require, types, browser, default) and run publint/arethetypeswrong in CI.

Follow-ups. Why can't CJS be tree-shaken? What is the dual-package hazard? What does an import map solve?

10.2 What a bundler does

What it is. Resolve imports from the entry points → load and transform each module → build the module graph → optimise (tree shake, scope hoist, minify, split chunks) → emit content-hashed chunks plus a manifest.

Example. The manifest is what the server or HTML uses to map a route to its chunks — and what makes "build once, promote many" possible.

Trade-offs. More aggressive optimisation means slower builds; most teams run full optimisation only in production builds and transpile-only in dev.

Follow-ups. What is scope hoisting and why does it help? What's in a source map and why hidden-source-map in production?

10.3 Tree shaking

What it is. Dead-code elimination over the ESM module graph.

Example. It works only when modules are ESM, the bundler can prove no side effects, and the package declares "sideEffects": false (or lists the files that do have them).

Trade-offs. Silent breakers: re-exporting a whole barrel (export * from './everything'), CJS dependencies, class-property mutation at module scope, and transpiling to CJS before bundling. Barrel files are the number-one cause of bloated frontend bundles — the fix is to ban deep barrels, import from paths, or generate per-component entry points.

Follow-ups. Why did importing one icon pull in 400KB? What does sideEffects actually tell the bundler? How do you prove a dependency is tree-shakeable?

10.4 Code splitting and chunking

What it is. Breaking the graph into chunks loaded on demand.

Example.

const SearchPage = React.lazy(() => import('./SearchPage'));          // route level
const Map = React.lazy(() => import('./Map'));                        // heavy widget
onMouseEnter={() => import('./CheckoutPage')}                          // prefetch on intent

Chunk strategy: a framework chunk (react, react-dom) that changes rarely so it stays cached, a commons chunk for modules used by ≥N routes, and per-route chunks.

Trade-offs. Over-splitting costs request overhead and deepens the waterfall; under-splitting ships code nobody runs. Splitting also introduces the chunk-404-after-deploy failure, which needs a retry-then-reload handler.

Follow-ups. Where do you split first? How do you avoid a loading spinner on every navigation? Why does a shared chunk's hash changing invalidate everything downstream?

More examples.

// 1 — route split with prefetch on intent, so splitting costs nothing visible
const Checkout = lazy(() => import('./Checkout'));
<Link onMouseEnter={() => import('./Checkout')} onFocus={() => import('./Checkout')} />

// 2 — survive a deploy that removed the chunk you are asking for
window.addEventListener('vite:preloadError', () => location.reload());
// webpack equivalent: catch ChunkLoadError, retry with a cache-bust, then reload

// 3 — keep the framework chunk stable so it stays cached across deploys
// splitChunks: { cacheGroups: { framework: { test: /[\\/]node_modules[\\/](react|react-dom)/ } } }

10.5 Tool comparison

Follow-ups. Why is Vite's dev server fast? (Serves source as native ESM, transforms on demand, pre-bundles deps with esbuild.) Why does Vite still use Rollup for production?

10.6 HMR

What it is. Swapping a module in the running app and propagating the update up the import graph to the nearest boundary that accepts it.

Example. If a change to a context provider full-reloads the page, it is because the boundary is effectively the root — usually a module with side effects or a root-level export change.

Trade-offs. HMR preserves state, which speeds iteration but can mask bugs that only appear on a fresh mount.

Follow-ups. Why does our HMR full-reload every time? What state survives an HMR update and what doesn't?

10.7 Build speed at scale

Trade-offs. Remote caching requires deterministic builds — timestamps, absolute paths and non-pinned tool versions all poison the cache.

Follow-ups. Our CI is 35 minutes; get it to 10. What makes a build non-deterministic? How would you measure build time as an SLO?

11. Platform architecture

11.1 Styling approaches

Trade-offs. The defensible modern recommendation is CSS variables for tokens plus a zero-runtime or utility layer: it survives Server Components, costs nothing at runtime, and makes theming a CSS concern rather than a React concern.

Follow-ups. Why does runtime CSS-in-JS hurt INP? How would you theme without re-rendering? What breaks when you use Emotion inside a Server Component?

11.2 Design tokens

What it is. Three tiers: primitives (--blue-500: #1a73e8), semantic (--color-action-primary: var(--blue-500)), component (--button-bg-primary: var(--color-action-primary)).

Example. Components consume only tiers 2 and 3. Themes swap the tier-1→tier-2 mapping via a data-theme attribute, so a theme switch is one DOM attribute and zero React re-renders. Tokens live in one source (JSON / Figma Tokens) and generate CSS, TS types, iOS and Android outputs via Style Dictionary.

Trade-offs. Three tiers is more indirection than a small team needs; it pays off the moment you have a second theme, a white-label partner, or a native platform.

Follow-ups. How do you add dark mode without touching every component? How do you stop teams using raw hex values? (Lint rule plus a Stylelint config.)

11.3 Component API design

What it is. The rules that make a shared library usable by hundreds of engineers without tickets.