Dev.Lib // Nathan Nguyen

Virtual DOM diffing complexity

Reconciliation compares trees keyed by element type and `key` — O(n) heuristics, not optimal edit distance.

1 min read

Event loop (macro vs microtasks)

Macrotasks (setTimeout, I/O, render) run one per turn; microtasks (Promise.then, queueMicrotask) drain fully before the next macrotask.

1 min read

Critical rendering path

HTML → DOM, CSS → CSSOM, combined render tree → layout → paint → composite.

1 min read

Code splitting strategies

Split by route, feature, or component — trade initial bundle size vs waterfall of chunk requests.

1 min read

Dynamic import chunking

`import()` creates async chunks named by bundler (webpack magic comments, Vite rollup output).

1 min read

Preload vs Prefetch vs Preconnect

**Preload** — high-priority fetch for current navigation (fonts, LCP image, critical script).

1 min read

CORS preflight

"Simple" requests skip preflight; non-simple methods, custom headers, or non-simple content-types trigger `OPTIONS`.

1 min read

CSRF vs XSS mitigation

**XSS** — attacker runs script in victim's origin; mitigate with output encoding, CSP, Trusted Types, sanitization (DOMPurify).

1 min read

FEATURED_ENTRYLEVEL_0206/27/2026

Web Workers vs Service Workers

**Web Workers** — parallel JS threads, no DOM, message-passing for CPU-heavy work (parsing, crypto).

1 min read

LEVEL_02

React & Rendering

Reconciliation algorithm

React walks trees comparing element types — same type updates props/DOM in place; different type unmounts subtree.

Concept2.1

Fiber architecture

Each unit of work is a Fiber node (component instance + hooks list + child/sibling/return pointers).

1 min read

Concurrent rendering

React can pause, resume, and abandon render work based on priority — not the same as `async/await` in components.

1 min read

Time slicing

Scheduler breaks render work into frames (~5ms slices) yielding to browser between slices.

1 min read

Scheduler priorities

Lanes/priorities order updates: discrete input > continuous input > default > transition > idle.

1 min read

Suspense boundaries

Suspense catches promise-throwing children and shows fallback until resolved — coordinates with concurrent rendering.

1 min read

Selective hydration

Not every server-rendered region hydrates immediately — prioritize interactive islands (inputs, cart) over static content.

1 min read

Server Components

RSC run only on server — zero client bundle for their logic, serializable props to client components.

1 min read

Tearing in concurrent UI

Tearing — UI shows mixed versions of external store during concurrent render (e.g.

1 min read

FEATURED_ENTRYLEVEL_0306/27/2026

Stale closure problem

Closures capture values from render when callback was created — effects and handlers see old state if deps wrong.

1 min read

LEVEL_03

Browser Performance

Layout thrashing

Interleaving DOM reads (offsetWidth, getBoundingClientRect) with writes forces synchronous layout recalc — "layout thrashing." Batch reads then writes; use `requestAnimationFrame` for visual updates.

Concept3.1

Paint vs Layout vs Composite

**Layout** — geometry changed, reflow subtree.

1 min read

Browser compositing layers

Promoted layers (transform, opacity, will-change, video, canvas) composite on GPU — too many layers waste memory.

1 min read

GPU acceleration in CSS

`transform: translate3d(0,0,0)` promotes layer but doesn't speed layout-bound work.

1 min read

CSS containment

`contain: layout style paint` isolates subtree recalc — useful for list items, widgets, virtualized rows.

1 min read

Render blocking resources

Parser-blocking scripts without `defer`/`async`, blocking CSS, sync font loading delay FCP/LCP.

1 min read

Render waterfalls

Sequential discovery → fetch → parse → execute chains (HTML discovers CSS, CSS discovers font, JS discovers chunk).

1 min read

Subpixel rendering

Fractional pixels cause blurry text/lines when elements land on half-pixel boundaries (transforms, zoom, retina scaling).

1 min read

Detached DOM nodes

Nodes removed from document but referenced in JS prevent GC — classic memory leak in SPAs (closures holding elements, forgotten listeners).

1 min read

FEATURED_ENTRYLEVEL_0406/27/2026

Garbage collection timing

GC pauses main thread — large object graphs and allocation churn cause jank.

1 min read

LEVEL_04

State & Data Flow

Structural sharing

Immutable updates reuse unchanged subtrees — only changed paths get new references.

Concept4.1

Immutable data patterns

Never mutate state in place — spread, Immer produce, or persistent data structures.

1 min read

Referential equality

`React.memo`, `useMemo`, selectors use `===` — new object each render defeats memoization even if values equal.

1 min read

Memoization pitfalls

Memoizing everything adds comparison overhead and code complexity — profile first.

1 min read

Race conditions in UI state

Out-of-order async responses show stale data if last-write-wins without request identity.

1 min read

Finite state modeling

Model UI as explicit states and events (idle, loading, success, error) — avoid boolean soup (`isLoading && !isError && ...`).

1 min read

Event sourcing in frontend

Append-only event log as source of truth; UI derives state by folding events — enables undo, replay, audit, time-travel debug.

1 min read

Optimistic UI rollback strategy

Apply UI change before server confirms; on failure revert and notify.

1 min read

Deterministic rendering

Same props/state → same output — no `Math.random()`, `Date.now()`, locale drift in SSR without sync.

1 min read

FEATURED_ENTRYLEVEL_0506/27/2026

Idempotent UI actions

Double-click submit, retry, or duplicate events must not double-charge or duplicate records.

1 min read

LEVEL_05

Caching & Networking

Cache invalidation strategies

TTL expiry, event-driven invalidation (mutation → bust tags), stale-while-revalidate, versioned URLs.

Concept5.1

Stale-while-revalidate

Serve stale cache immediately while fetching fresh in background — great UX for non-critical data.

1 min read

ETag vs Cache-Control

**Cache-Control** — freshness rules (max-age, no-store).

1 min read

HTTP/3 and QUIC

QUIC over UDP — multiplexing without head-of-line blocking, faster handshake (0-RTT with caveats), connection migration.

1 min read

Backpressure in Streams API

ReadableStream signals consumer readiness via `pull()` / desired size — producer must not flood memory.

1 min read

AbortController

Cancel in-flight fetch when component unmounts, route changes, or new search supersedes old.

1 min read

Streaming fetch response handling

Read `response.body` reader incrementally — parse NDJSON/SSE/chunked HTML as bytes arrive.

1 min read

Priority hints

`fetchpriority="high"` on LCP image; `low` on below-fold.

1 min read

SameSite cookie modes

**Strict** — no cross-site send (best CSRF, breaks some OAuth flows).

1 min read

FEATURED_ENTRYLEVEL_0606/27/2026

Speculative prerendering

Browser/speculation rules prerender likely next page — instant navigation when correct, wasted bandwidth/CPU when wrong.

1 min read

LEVEL_06

Web Security

Content Security Policy (CSP)

Whitelist script/style/connect sources — blocks inline script unless nonce/hash.

Concept6.1

Trusted Types

Enforces typed DOM sinks — `innerHTML` requires TrustedHTML from policy, blocking DOM XSS injection.

1 min read

DOM clobbering

Named elements (`<img name="x">`) inject properties on `window`/`document` — can break scripts expecting undefined.

1 min read

Prototype pollution

Merging untrusted JSON onto `{}` can set `__proto__` / `constructor.prototype` — affects all objects.

1 min read

Same-origin policy nuances

Origin = scheme + host + port.

1 min read

Service Worker lifecycle traps

New SW waits in `waiting` until tabs close — users stuck on old cache.

1 min read

SharedArrayBuffer

Requires cross-origin isolated context (`Cross-Origin-Opener-Policy`, `Cross-Origin-Embedder-Policy`) — Spectre mitigation.

1 min read

Transferable objects

`postMessage` can transfer ArrayBuffer ownership zero-copy — sender neutered after transfer.

1 min read

CORS preflight internals

Browser sends OPTIONS; server responds with allowed origin/methods/headers/max-age.

1 min read

FEATURED_ENTRYLEVEL_0706/27/2026

Offline conflict resolution

Offline writes sync later — last-write-wins loses data; need versioning, CRDTs, or server merge.

1 min read

LEVEL_07

Web Platform APIs

Islands architecture

Static HTML shell with small hydrated interactive islands — minimal JS vs full SPA.

Concept7.1

Partial hydration

Only interactive subtrees hydrate; static HTML stays inert — reduces JS execution at load.

1 min read

Streaming SSR

Send HTML shell early, stream completed segments as async data resolves — improves TTFB vs buffer-all SSR.

1 min read

Shadow DOM

Encapsulated DOM + scoped CSS — internals hidden from `document.querySelector`.

1 min read

Custom Elements lifecycle

`connectedCallback`, `disconnectedCallback`, `attributeChangedCallback`, `adoptedCallback` — mirror mount/unmount/props.

1 min read

Web Components interoperability

React historically mismatched props vs attributes on custom elements — use property setters or `@lit/react` wrappers.

1 min read

IntersectionObserver internals

Async, batched callbacks when element visibility crosses thresholds — no scroll listener jank.

1 min read

ResizeObserver loop limits

ResizeObserver fires when element size changes — infinite loop if callback mutates size synchronously.

1 min read

MutationObserver cost

Observes DOM mutations — expensive on large subtrees and high churn.

1 min read

FEATURED_ENTRYLEVEL_0806/27/2026

OffscreenCanvas

Canvas rendering in Worker — off main thread for games, charts, image processing.

1 min read

LEVEL_08

Concurrency & Streams

Task starvation

Low-priority tasks never run if high-priority work always pending — infinite transition updates starve idle cleanup.

Concept8.1

Priority inversion in async code

High-priority UI waits on low-priority async completion because shared lock/order — e.g.

1 min read

Scheduler internals

React Scheduler (and browser `scheduler.postTask`) coordinate with `isInputPending` — cooperative multitasking.

1 min read

Concurrent rendering tearing

Same as [2.9 Tearing](#29-tearing-in-concurrent-ui) at pipeline level — external store read mid-render shows inconsistent UI.

1 min read

Backpressure handling

Producers must respect consumer speed — streams, SSE, WebSocket flood, rapid setState from socket.

1 min read

Streaming SSR pipelines

Data loaders → React render → HTML stream → browser progressive parse.

1 min read

WebRTC basics

P2P media/data via ICE/STUN/TURN for NAT traversal — signaling server sets up connection.

1 min read

CRDT basics for collaboration

Conflict-free replicated data types merge concurrent edits without central lock — eventual consistency.

1 min read

Shared memory models

Main thread vs Worker vs SharedArrayBuffer — who owns which buffer.

1 min read

FEATURED_ENTRYLEVEL_0906/27/2026

Deterministic UI under async

Async completions arrive out of order — UI must show consistent state (request tokens, latest-wins, merge).

1 min read

LEVEL_09

Performance Metrics

First Input Delay (FID)

FID measures delay from first user input to event handler start — main thread busy (long tasks) inflates it.

Concept9.1

Interaction to Next Paint (INP)

INP captures slowest interaction latency (click/tap/key) to next frame paint — holistic responsiveness metric.

1 min read

Cumulative Layout Shift (CLS)

CLS sums unexpected layout shift scores — images without dimensions, dynamic injects, web fonts FOIT/FOUT.

1 min read

Largest Contentful Paint (LCP)

LCP element usually hero image/text block — time until largest paint in viewport.

1 min read

PerformanceObserver API

Subscribe to `paint`, `largest-contentful-paint`, `layout-shift`, `longtask`, `event` entry types — RUM in production with `buffered: true`.

1 min read

Long Tasks API

Tasks > 50ms block input — PerformanceObserver `longtask` attributes blame to scripts/iframe.

1 min read

Browser memory leak detection

Heap snapshot diff — detached DOM, growing listeners, closures holding large graphs.

1 min read

Accessibility tree

Parallel tree to DOM — roles, names, states exposed to assistive tech.

1 min read

ARIA live regions internals

`aria-live="polite|assertive"` queues announcements — polite waits for idle; assertive interrupts.

1 min read

FEATURED_ENTRYLEVEL_1006/27/2026

Pointer events model

Unified mouse/touch/pen — `pointerdown` vs separate touch handlers.

1 min read

LEVEL_10

Frontend Architecture

Edge rendering

Render at CDN edge close to user — lower TTFB, geo-distributed, limited runtime (Workers, Edge Functions).

Concept10.1

Micro-frontend orchestration

Independent deployable UI slices — shell loads remotes (iframe, module federation, web components).

1 min read

Module federation

Webpack/Vite federation — runtime share of remote modules across apps (`remoteEntry.js`).

1 min read

WebAssembly integration

Near-native compute in browser — port codecs, editors, games from C/Rust.

1 min read

IndexedDB scaling strategy

Async key-value store — large structured data, offline cache, not for hot reactive state.

1 min read

Server Components architecture

Server/client split across app tree — data fetching on server, interactivity on client boundaries.

1 min read

Offline-first design

Local source of truth syncs to server — optimistic UI, conflict resolution, queue mutations.

1 min read

Conflict resolution models

LWW, vector clocks, CRDT merge, server authoritative reject — pick per domain (notes vs inventory).

1 min read

Distributed UI consistency

Multiple tabs, devices, edge caches show same logical state — broadcast channel, `storage` event, WebSocket sync, SWR revalidation.

1 min read