Part 0 · 3 chapters · ~5 min

How to Use, and the Index

A reference of 312 frontend terms across thirteen layers. What a card holds, how the layers fit together, and an index by layer and A to Z with a live filter.

How to use this module

This is a reference, not a course. It has 312 terms in thirteen layers, and each term gets one card:

what a card holds

A diagram of the mechanism: a flow, a stack, a timeline, a comparison, a tree, a sequence or a snippet. If you can redraw it from memory, you can explain the term.
A one-line meaning you could say out loud in a design review.
In practice: where you will meet the term, such as a DevTools panel, a header, a bug report or a review comment.
Deep dive: links into the course part that explains the mechanism in full.

Each layer opens with an animated map that places its terms in pipeline order. The map below does the same for the layers themselves. Every card has its own anchor, so you can link a teammate straight to part-06-runtime.html#t-microtask.

a revision drill

Open a layer, cover the meaning under each diagram, and say what the diagram shows. Any card you cannot explain from its drawing is the next deep-dive link to follow.

THIRTEEN LAYERS, ONE PIPELINE

the order a page is fetched, built, run, shipped and held to account, and where each layer of terms lives

swipe the figure sideways, or tap expand for full screen

1/6

arrive

Arrive: bytes come over the network and are parsed into a DOM and running scripts.

Index by layer

Every term, grouped by layer in the order the module presents them. Type to filter.

A to Z

The same terms in alphabetical order, each tagged with its layer. The filter above also filters this list.

AAbortController P6
Accessibility audit P11
Accessibility test (automated) P9
Accessibility tree P11
Accessible description P11
Accessible name P11
ADR P13
Affected (only changed) P8
Anchor positioning P4
ARIA P11
Arrange, act, assert P9
aspect-ratio P4
AST P2
async vs defer P2
async/await P6

BBack/forward cache P10
Backend for frontend P13
Backend for frontend (BFF) P12
Batching P7
BEM P3
Bloom filter (style) P3
Box model P4
Browse vs focus mode P11
Bundle analyser P8
Bundle budget P10
Bundler P8
Bytecode P2

CCache-Control P1
Call stack P6
Canvas vs SVG vs DOM P5
Cascade P3
Cascade layers P3
CDN P1
Character encoding P2
Chunk and content hash P8
CI pipeline P8
Clickjacking P12
Code cache P2
Code coverage P9
Code splitting P8
Compositing layer P5
Compositor P5
Compositor-only animation P5
Compound component P13
Compression (gzip, Brotli, zstd) P1
Computed value P3
Concurrent rendering P7
Connection reuse (keep-alive) P1
Container queries P3
Containing block P4
Content Security Policy P12
content-visibility P4
Context P7
Contract test P9
Contrast ratio P11
Controlled vs uncontrolled input P7
Conway's law P13
Cookie attributes P12
Core Web Vitals P10
CORS P1
CRDT P13
Critical CSS P3
Critical rendering path P10
Cross-origin isolation P12
CrUX P10
CSRF P12
CSS Grid P4
CSS Modules P3
CSS-in-JS P3
CSSOM P3
Cumulative Layout Shift P4
Custom properties P3

DDamage (invalidation rect) P5
Declarative Shadow DOM P2
Derived state P7
Design system P13
Design tokens P3
Detached DOM P6
Device tier P10
Display list P5
DNS resolution P1
Document.readyState P2
DOM P2
DOMContentLoaded P2
Dual package (ESM/CJS) P8

EEdge rendering P13
End-to-end test P9
Environment variables (build-time) P8
Error boundary P7
ETag and revalidation P1
Event loop P6
Event propagation P6
Execution context and scope P6

FFacade P10
Fake timers P9
FCP P10
Feature flag P8
Feature-sliced structure P13
Fetch priority P1
Fiber P7
Field data vs lab data P10
Flaky test P9
Flash of unstyled content P3
Flexbox P4
Focus P11
Focus trap P11
Focus visible P11
Font loading (font-display) P3
Forced synchronous layout P4
Formatting context P4
Frame P5
Frame budget P5

GGarbage collection P6
GPU process P5

H:has() P3
Head-of-line blocking P1
Heading structure P11
Headless component P13
Hidden class (shape) P6
HMR P8
HTTP cache P1
HTTP/1.1 P1
HTTP/2 P1
HTTP/3 and QUIC P1
Hydration P2
Hydration cost P10

IIdempotency key P13
Image CDN P10
Image decode P5
inert P11
Inheritance P3
Inline cache P6
innerHTML parsing P2
INP P10
Integration test (component) P9
Intrinsic size P4
Islands architecture P13

JJank P5
JavaScript parse P2
JIT (TurboFan, Maglev) P6
JSON.parse fast path P2

KKeys P7

LLandmarks P11
Lanes P7
Layer explosion P5
Layout (reflow) P4
Layout boundary (containment) P4
Layout thrashing P4
Layout tree P4
Lazy loading P5
Lazy parsing (preparse) P2
LCP P10
Lifting state up P7
Lighthouse CI P9
Line box and inline layout P4
Live region P11
load event P2
Lockfile P8
Logical properties P3
Long Animation Frame (LoAF) P10
Long task P6

MMain-thread work P10
Margin collapsing P4
Memory leak P6
MFA and step-up P12
Micro-frontends P13
Microtask P6
Minification P8
Mock Service Worker P9
Module federation P8
Module graph P2
Monorepo P8
MPA P13
Multi-tenancy P13
Mutation testing P9

NNormalised cache P13

OOAuth 2.0 and OIDC P12
Offline-first P13
OffscreenCanvas P5
Optimistic update P7
Origin P12

PPaint P5
Paint holding P5
Paint order P5
Parser-blocking script P2
Passkeys (WebAuthn) P12
Peer dependency P8
Percentile (p75, p95) P10
Performance budget P10
Performance marks and measures P10
Performance regression P10
PKCE P12
Polyfill P8
postMessage security P12
POUR P11
Preconnect P1
prefers-reduced-motion P11
Prefetch P1
Preflight P1
Preload P1
Preload scanner P2
Preview deployment P8
Promise P6
@property P3
Property-based test P9

QQuirks mode P2

RRaster P5
React Compiler P7
Real-time sync P13
Recalculate Style P3
Reconciliation P7
Release train P8
Render phase vs commit phase P7
Render-blocking CSS P2
Rendering strategies P13
requestAnimationFrame P5
requestIdleCallback P6
ResizeObserver P4
Resource hints summary P10
Responsive images P5
Role P11
Roving tabindex P11
RTT P1

SSame-origin policy P12
SameSite P12
Sanitisation P12
scheduler.postTask P6
Screen reader P11
Scroll anchoring P4
Secrets in the bundle P12
Security headers P12
Selector matching P3
Semantic versioning P8
Server Components P7
Server state P7
Server-Sent Events P1
Service worker P6
Session token vs JWT P12
Shadow DOM scoping P3
SharedArrayBuffer and Atomics P6
Side effects (package) P8
Site vs origin P12
Skip link P11
Smoke test P9
Snapshot test P9
Source map P8
SPA P13
Specificity P3
Spectre and site isolation P12
Speculation Rules P10
Speculative parsing P2
SSG and ISR P13
SSR P13
Stacking context P4
stale-while-revalidate P1
State management P13
Storybook P9
Strangler fig migration P13
Streaming HTML P2
StrictMode P7
Structured clone and transfer P6
Style invalidation P3
Subpixel layout P4
Subresource Integrity P12
Supply-chain attack P12
Suspense P7

TTab order and tabindex P11
Target size P11
Task (macrotask) P6
Task graph and caching P8
TBT P10
TCP handshake P1
Test double (mock, stub, spy, fake) P9
Test fixture and factory P9
Test in production P9
Test isolation P9
Test pyramid P9
Testing Library P9
Testing trophy P9
Text shaping P4
Third-party cost P10
Throttling (CPU, network) P10
Tiling P5
TLS handshake P1
Tokeniser P2
Transpiler P8
Tree construction P2
Tree shaking P8
Trusted Types P12
TTFB P1

UUnit test P9
URL as state P13
Use of colour P11
useEffect P7
useLayoutEffect P7
useMemo and useCallback P7
useRef P7
useState P7
Utility-first CSS P3

VView Transitions P5
Viewport units P4
Virtual DOM P7
Virtualisation (windowing) P4
Visual regression test P9

WWCAG P11
WeakMap and WeakRef P6
Web Animations API P5
Web Worker P6
WebSocket P1
will-change P5

XXSS P12

YYielding P6