All flashcards

526 cards · 424 live examples. Each card has a link of its own; select an example to replay it, press and hold it to slow it down.

Design

Animation

Design

JavaScript

JavaScript & Browsers

Event Loop
Call stack
The single place JavaScript runs function calls. It's LIFO: the last function pushed on is the first to finish and pop off. While it has frames on it, nothing else can run.
Event Loop
Web APIs
Browser-provided features (timers, fetch, DOM events) that run outside the JS engine. You hand them work and a callback; they run it on their own and hand the callback back when done — so the stack stays free.
Event Loop
Task queue (macrotasks)
Where finished callbacks (setTimeout, DOM events) wait their turn. It's FIFO — first in, first out. One task runs to completion before the next is picked up.
Event Loop
Microtask queue
A higher-priority queue for promise callbacks and queueMicrotask. It's drained completely — every microtask runs — before the next macrotask or a render.
Event Loop
Event loop
The loop that ties it together: whenever the call stack is empty, it drains all microtasks, then takes one task from the queue and runs it. Repeat forever.
Event Loop
Macrotask vs microtask
Both queues are first in, first out, but all microtasks drain before the next macrotask — always. A promise scheduled after a timer still runs first.
Event Loop
setTimeout(fn, 0)
0 ms is a minimum delay, not 'run now'. The callback is still queued as a task, so it waits for the current code and all microtasks first — it never runs immediately.
Event Loop
async / await
Syntactic sugar over promises. Code before await runs synchronously; everything after await is queued as a microtask that resumes once the awaited value settles.
Event Loop
Render step & rAF
After microtasks drain, the browser may paint. requestAnimationFrame (rAF) callbacks run right before that paint — the right place for visual updates so they land in the next frame.
Event Loop
Blocking the main thread
Long synchronous work keeps a frame on the stack, so the loop can't reach queued tasks or repaint. Clicks, script-driven animations, and rendering freeze until it finishes; compositor-only animations (transform, opacity) and scrolling can keep going.
Event Loop
Microtask starvation
Because microtasks fully drain before anything else, a microtask that keeps scheduling more microtasks never lets the loop reach the task queue or a render — starving them.
Browser Architecture
Browser vs rendering engine
The browser is the whole app; the rendering engine (also called the browser engine) is the part that turns HTML and CSS into pixels. Each major browser ships its own: Chrome and Edge use Blink, Safari uses WebKit, Firefox uses Gecko.
Browser Architecture
Multi-process architecture
Modern browsers split work across separate OS processes — browser, renderer, GPU, network, and utility — so one crashed or busy tab can't take down the whole browser.
Browser Architecture
Browser process
The privileged process that owns the UI you interact with — address bar, tabs, back and forward — and coordinates the network and renderer processes. It's the most privileged process; renderers are sandboxed.
Browser Architecture
Renderer process
The process (often one per site) responsible for everything inside a tab: parsing, styling, layout, paint, and running the page's JavaScript on its main thread.
Browser Architecture
Sandbox
Renderer processes run with restricted privileges — no direct file or network access — so a compromised page can't touch your system. They ask the browser process to act on their behalf.
Browser Architecture
Site isolation
Each site is given its own renderer process, so a malicious page can't read another site's memory. A defense hardened after the Spectre CPU attacks.
Navigation
URL to pixels
Typing a URL kicks off a chain: DNS lookup, then connect (TCP + TLS), then an HTTP request, then the response — and only then does the browser hand the HTML to a renderer to display.
Navigation
DNS lookup
Translating a human domain name into the numeric IP address of a server. The browser checks its caches first, then asks a DNS resolver (a server that looks names up for you).
Navigation
TCP & TLS handshake
Before any data flows, the browser opens a TCP connection (a three-step handshake) and, for HTTPS, negotiates TLS encryption — extra round trips before the first byte arrives.
Navigation
HTTP request / response
The browser sends an HTTP request (method, URL, headers); the server replies with a status code, headers, and a body — the HTML document to render.
Navigation
Commit navigation
Once the response's first bytes and content type confirm it's a page to display, the browser process tells a renderer to take over — the URL bar updates and the old page is gone.
Rendering
Parsing HTML → DOM
The browser reads HTML top to bottom, tokenizes the tags, and builds the DOM (Document Object Model) — a tree of nodes representing the page's structure and content.
Rendering
CSSOM
The CSS Object Model: a tree built from all CSS rules. Combined with the DOM, it gives every node its final style after the cascade and inheritance. The style half of what gets rendered.
Rendering
Render tree
DOM and CSSOM combined into a tree of only the nodes that will actually be painted, each with its computed style. Invisible nodes (display:none, <head>) are left out.
Rendering
Layout (reflow)
Walking the render tree to compute the exact geometry — position and size — of every box on the page. Also called reflow, and it runs again whenever geometry changes.
Rendering
Paint
Recording what to draw for each box — text, colors, borders, shadows, images — often per layer. It produces draw commands, not pixels; rasterization turns those into pixels.
Rendering
Render-blocking CSS
The browser won't paint until the CSSOM is ready, so CSS blocks the first render. It's fetched at high priority to unblock the page as fast as possible.
Rendering
Parser-blocking JavaScript
A plain <script> tag pauses HTML parsing until it's fetched and run, because a script can change the DOM. The `async` and `defer` attributes let parsing continue.
Rendering
Preload scanner
A secondary parser that runs ahead of the main one while it's blocked, spotting and prefetching resources — images, scripts, stylesheets — before they're formally reached.
Styling & Layout
Selector matching (right to left)
Browsers match CSS selectors right to left, starting from the rightmost 'key' selector. Rejecting non-matching elements early is far faster than searching left to right.
Styling & Layout
Reflow triggers
Changing geometry (resizing, editing text, adding elements, changing width or font size) invalidates layout. Reading a layout property like offsetHeight right after such a write forces the pending layout to run immediately. Reflows are expensive.
Styling & Layout
Layout thrashing
Interleaving DOM reads that force layout with writes, in a loop, so the browser recomputes layout over and over. Batch all reads, then all writes, to avoid it.
Styling & Layout
Repaint vs reflow
A repaint redraws pixels without moving anything (like a color change); a reflow recomputes geometry and is costlier because it can cascade to surrounding elements.
Compositing & Frames
Layers & compositing
The page is split into layers painted separately, then the compositor stitches them together. Moving a layer with transform or opacity skips layout and paint entirely.
Compositing & Frames
Compositor thread
A separate thread that moves and combines already-painted layers without the main thread. It can keep scrolling and running transform/opacity animations even while JS is busy (main-thread animations still stall).
Compositing & Frames
Rasterization
Turning each layer's recorded draw commands into a bitmap of pixels — usually in tiles and on the GPU — so the compositor has something concrete to put on screen.
Compositing & Frames
Frame budget (60fps)
To hit 60 frames per second, the browser has roughly 16 ms per frame for JS, style, layout, paint, and composite combined. Overrun it and frames drop.
Compositing & Frames
Jank
Visible stutter when the browser misses frames — usually because a long main-thread task pushed style, layout, or paint past the frame deadline.
Networking
RPC (Remote Procedure Call)
Calling a function that runs on another machine as if it were local: the arguments are serialized, sent over the network, executed on a server, and the return value is sent back.

Apple HIG

Foundations

Patterns

Components

Inputs

Technologies