10 parts · 57 chapters
Algorithms Frontend Runs On
A frontend engineer runs more algorithms than they write: every frame the browser matches selectors, breaks lines, sizes flex tracks, culls paint, and the engine walks transition trees and marks heaps. Knowing those algorithms is what turns "it is slow" into "it is O(n²) here, and here is the n". This module is the algorithms you write for a UI and the ones the platform runs underneath, each with its complexity, its data structure, and a measurement.
First, where complexity actually bites in an interface, with numbers. Then the algorithms you own: debounce and throttle, windowing, list diffing, caches, search and ranking, sorting at UI scale, graph traversal, priority scheduling. Then the platform's: the CSSOM, layout, paint, the schedulers, V8, reconciliation, compilers, and text processing, each drawn step by step.
where it bitesThe sizes a UI actually has, and which algorithm goes quadratic at those sizes.
you writeDebounce, virtualisation, diffing, LRU, search, sort, graphs, priority queues: each with code and a cost.
the CSSOMSelector matching right to left, the bloom filter, invalidation sets as set algebra.
layoutBlock, inline and line breaking, the flex algorithm, grid track sizing, tables: the actual steps.
paint and schedulePaint order, display list culling, tiling and damage; the event loop and React lanes as scheduling problems.
the engineTransition trees, inline cache lookup, generational and incremental GC as algorithms.
reconciliation and compilersReact's O(n) heuristic diff; tokenising, Pratt parsing, SSA, DCE, register allocation, tree shaking.
textUTF-8 decoding, grapheme segmentation, bidi, hyphenation, fuzzy matching.
00
Why Algorithms, In A Frontend Course
Where complexity bites in an interface · Four quadratics, measured · The toolkit: structures that turn scans into lookups · Measuring: how to know the exponent · The map of this course
5 ch · ~30 min01Algorithms You Write
Debounce, throttle, and coalescing · Virtualisation and windowing · Diffing lists: LCS, keys, and the LIS trick · Caches: LRU, LFU, and bounds · Search and ranking · Sorting at UI scale · Graphs: dependencies, trees, and traversal · Scheduling with priority queues · Reading your own algorithms: tools
9 ch · ~60 min02CSSOM Algorithms
Selector matching, right to left · The ancestor bloom filter · Cascade resolution as a sort, and style sharing · Invalidation sets: what to restyle on a change · Measuring style work
5 ch · ~35 min03Layout Algorithms
Block and inline: one pass, then line breaking · Line breaking: greedy, and the optimal one it is not · The flex algorithm · Grid track sizing · Table layout, and measuring all of it
5 ch · ~45 min04Paint And Compositing Algorithms
Paint order: a tree walk in seven phases · Display lists and culling · Tiling, damage, and what gets redrawn · Compositing: layers as a sorted draw · Measuring paint and composite
5 ch · ~35 min05Scheduling Algorithms
The event loop as a scheduler · React's lane model: priorities as bits · Cooperative scheduling: slices, deadlines, and where to yield · Idle time, deadlines, and the platform API · Scheduling: measuring and the comparison
5 ch · ~40 min06V8's Algorithms
The transition tree as a trie · Inline cache lookup · Generational collection: Cheney's copying scavenger · Mark-sweep and the tri-colour invariant · The engine's algorithms, in one table
5 ch · ~40 min07Reconciliation
Why O(n) and not O(n³) · The fiber tree: a traversal you can pause · Keyed reconciliation, step by step · Bailouts: rendering only what changed · Alternatives: compiled diffs and no diffs at all · Measuring reconciliation
6 ch · ~40 min08Compiler Algorithms
Tokenising as a state machine · Parsing: recursive descent and Pratt · SSA, folding, and dead code · Register allocation: interval scheduling · Tree shaking as reachability · The compiler pipeline you run every day
6 ch · ~45 min09Text And Encoding
Bytes, code units, code points, graphemes · UTF-8 decoding as a state machine · Grapheme cluster segmentation · Bidi and hyphenation · Fuzzy matching: edit distance and bitap · Text algorithms: the table, and the course's end
6 ch · ~40 minEvery chapter has a costEach algorithm comes with its complexity, the data structure it needs, the sizes at which it matters in a UI, and the sibling course where the mechanism lives (the browser course for the pipeline, the JS course for the engine).