All flashcards

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

Flashcards

Animation

Design

JavaScript Flashcards

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
The 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
All microtasks drain before the next macrotask — always. A promise scheduled after a timer still runs first, because microtasks jump the queue.
Event Loop
setTimeout(fn, 0)
0 ms is a minimum delay, not 'run now'. The callback still waits for the stack to clear and all microtasks to drain first — so it runs last, not 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 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, animations, and rendering all freeze until it finishes.
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 (or '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
The 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 only one with broad access to your machine.
Browser Architecture
The 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
The 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.
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 — a tree of nodes representing the page's structure and content.
Rendering
CSSOM
The tree-shaped model of all CSS rules, with every node's styles resolved after the cascade and inheritance. The style half of what gets rendered.
Rendering
The 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
Filling in the actual pixels — text, colors, borders, shadows, images — for each box, often onto separate layers. Turns geometry into a picture.
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
The Preload Scanner
A secondary parser that races ahead of the main one while it's blocked, spotting and pre-fetching 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
Anything that changes geometry — resizing, editing text, adding elements, or even reading a layout property like offsetHeight — forces a reflow. 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
The 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.
Compositing & Frames
Rasterization
Converting painted layers into actual bitmaps of pixels — usually in tiles and on the GPU — so the compositor has something concrete to put on screen.
Compositing & Frames
The 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 Flashcards

Foundations

Patterns

Components

Inputs

Technologies